使用 dc.js 的双维度和双 x 轴箱线图

Question

是否可以使用 dc.js 绘制图形的两个 x 轴，即一个在下方，一个在上方。 One Dimension/ x 轴包含 a b，x 轴上方包含 1（a b 低于 a 轴）2（a b 低于 x 轴）。附上一张img来解释这个观点。如果可以的话请给点建议。

此致。

Answer 1

至于在箱线图之间添加线条，这里有一个可行的 hacky 解决方案。可能需要一些工作才能使其通用。

假设我们在名为 domain.

的变量中有域 (['1A', '1B', '2A, '2B', ...])

我们可以添加一个 pretransition handler 在每两个框之后画线：

function x_after(chart, n) {
  return (chart.x()(domain[n]) + chart.x()(domain[n+1])) / 2 + chart.margins().left + 7; // why 7?
}

chart.on('pretransition', chart => {
  let divide = chart.g().selectAll('line.divide').data(d3.range(domain.length/2));
  divide.exit().remove();
  divide = divide.enter()
    .append('line')
    .attr('class', 'divide')
    .attr('stroke', 'black')
    .merge(divide);
  divide
    .attr('x1', n => x_after(chart, n*2 + 1))
    .attr('x2', n => x_after(chart, n*2 + 1))
    .attr('y1', chart.margins().top)
    .attr('y2', chart.margins().top + chart.effectiveHeight())
})

这使用 D3 通用更新模式在每隔一个框（特别是那些索引号为奇数的框）之后添加一条垂直线。

它取 1B 和 2A、2B 和 3A 等的 X 位置的平均值。我不知道为什么我必须加 7，所以可能我遗漏了什么。

demo fiddle.

使用 dc.js 的双维度和双 x 轴箱线图

Box plot with dual dimension and dual x-axis using dc.js

d3.js

crossfilter

dc.js