如何将水平中断应用于d3.js条形图
kci*_*ski 16 charts d3.js rickshaw
我正在使用人力车(基于d3.js)来绘制堆积的条形图.问题是第一个栏通常比其他栏更高,破坏了视觉反馈.
使用对数标度(我猜)这里不是一个选项,因为那时条形图中堆栈之间的比例会被破坏.我想引入一个横向中断,如下图所示:
但是,我找不到Rickshaw或d3.js的任何开箱即用的功能来做这样的事情.有关如何制作一个的任何建议？
这将需要相当多的额外工作.以下是您需要做的概述.
- 创建两个刻度,一个用于下部,一个用于上部.相应地设置域和范围.
- 将值传递到较低的比例,将它们限制在最大域值,使得较长的条形将达到最大值.
- 将值传递给较高比例,过滤低于最小值的值.
您基本上需要创建两个彼此对齐的图形,以给人一种只有一个的印象.如果你记住这一点,做到这一点应该不会太困难.
这是一个快速而肮脏的概念证明,它使用线性刻度.clamp(true)来防止条形对域外的值变得太长.
- @kciesielski你能发布你最终使用的代码吗？ (3认同)
- 说得通。[这里是替代方法]（http://jsfiddle.net/9xbgT/2/）使用单个刻度–而不是“上”和“下”。用单标度，我的意思是“ var fullScale = d3.scale.linear（）。domain（[0,5,15,30]）。range（[280,180,160,0]）”。这样，您就可以使用每条矩形和单个Y轴绘制图表。然后叠加中断符号，使条形图和轴看起来是分段的。 (2认同)
| 归档时间： |
|
| 查看次数： |
2682 次 |
| 最近记录： |