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

Question

dc.js 是否可以绘制图形的两个 x 轴，即一个在下方，一个在上方。一维/ x 轴包含 ab，x 轴上方包含 1（ab 与 a 轴下方）2（ab 与 x 轴下方）。附上一张图片来解释这个观点。如果可能的话，请给一些建议。

问候。

标签： d3.jsdc.jscrossfilter

Answer 1

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

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

我们可以添加一个pretransition处理程序，在每隔一个框之后画线：

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，所以可能我遗漏了一些东西。

演示小提琴。