使用dc.js的二维和双x轴箱形图 [英] Box plot with dual dimension and dual x-axis using dc.js

问题描述

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

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.

致谢.

推荐答案

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

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.

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

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

我们可以添加 pretransition处理程序在第二个框之后画线:

We can add a pretransition handler that draws lines after every second 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())
})

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

This uses the D3 general update pattern to add a vertical line after every other box (specifically those with odd index number).

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

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.

演示小提琴.

这篇关于使用dc.js的二维和双x轴箱形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！