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

问题

Is it possible with dc.js to draw two x-axis of a graph i.e. one is below and one is above. One Dimension/ x-axis contain a b and above x-axis contain 1 (a b with below a-axis) 2 (a b with below x-axis). An img is attached to explain the view. If it is possible kindly give some suggestion.

Regards.

回答1:

As for adding lines between the box plots, here is a hacky solution that works ok. Would probably need some work to make it general.

Assume we have the domain (['1A', '1B', '2A, '2B', ...]) in a variable called domain.

We can add a pretransition handler that draws lines between every other box:

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

This uses the D3 general update pattern to add a vertical line after the odd boxes. It takes the average of the X position of 1B and 2A, 2B and 3A, etc. I have no idea why I had to add 7, so probably I am missing something.

demo fiddle.

来源：https://stackoverflow.com/questions/60415797/box-plot-with-dual-dimension-and-dual-x-axis-using-dc-js