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

Question

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

问候

Answer 1

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

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

我们可以添加一个pretransition handler在每隔一个方框之后绘制线条：

pretransition

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

[它取1B和2A，2B和3A等的X位置的平均值。我不知道为什么必须加7，所以可能我丢失了一些东西。

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())
})

。