使用dc.js的二维和双x轴箱形图

Question

使用dc.js是否可以绘制图形的两个x轴，即一个在下面，一个在上面。一维/ x轴包含b，x轴上方包含1（a b低于a轴）2（a b低于x轴）。附有img以解释该视图。如果可能的话，请提出一些建议。

致谢。

Answer 1

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

假设我们在名为['1A', '1B', '2A, '2B', ...]的变量中拥有域（domain）。

我们可以添加一个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。