Charts 如何将水平分隔符应用于d3.js条形图

我正在使用人力车（基于d3.js）绘制堆叠条形图。问题是第一个栏通常比其他栏高很多，破坏了视觉反馈。

使用对数比例（我猜）在这里不是一个选项，因为这样一来，条形图中堆栈之间的比例就会被打破。我想引入一个水平打断，如下图所示：

---

但是，我找不到Rickshaw或d3.js的任何开箱即用功能来做这样的事情。有没有关于如何制作的建议？

这需要大量的额外工作。这是你必须做的事情的概要

• 创建两个比例，一个用于下部，一个用于上部。相应地设置域和范围
• 将值传递到较低的比例，以最大域值对其进行封顶，这样较长的条将达到最大值
• 将值传递到上刻度，过滤低于最小值的值

您基本上需要创建两个相互对齐的图形，以给人留下只有一个图形的印象。如果你记住这一点，做这件事应该不会太难

这里有一个快速而肮脏的方法，它使用线性标尺的

.clamp（true）

，以防止条形对于域外的值变得太长。

该方法适应任何其他标尺（例如d3线性标尺）并添加不连续的概念。这些不连续性通过“不连续性提供者”确定，该提供者可用于在标尺中创建一个或多个“间隙”

例如，要删除范围，可以按如下方式构造比例：

var scale = scaleDiscontinuous(scaleLinear())
    .discontinuityProvider(discontinuityRange([50, 75]))

下面是一个完整的示例，演示了如何使用它在比例中创建“打断”，以便渲染在其总体范围内有较大间隙的值

---

有道理。使用单个刻度–而不是

上部

和

下部

。所谓单尺度，我指的是

var fullScale=d3.scale.linear（）.domain（[0,5,15,30]）.range（[280180160,0]）

。这使您可以使用每个条形的单个矩形和单个Y轴绘制图表。然后叠加打断符号，使条和轴看起来是分段的。谢谢，我尝试过这种方法，效果很好，但需要相当多的管道。毕竟，我采取了一种不同的方法，这种方法在我的案例中效果很好，而且更容易开发。尽管如此，你的答案还是解决了问题。@kcieselski你能发布你最终使用的代码吗？