问题描述
使用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轴箱形图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!