如何在d3.js柱状图中应用水平分割线

Question

我正在使用基于d3.js的Rickshaw绘制堆叠条形图。问题是第一个条形通常比其他条形高得多，破坏了视觉反馈。

使用对数刻度在这里（我猜）不是一个选项，因为这样，条形中堆叠之间的比例将被破坏。我想介绍像以下图片中的水平断裂：

但是，我无法找到Rickshaw或d3.js的任何开箱即用的功能来执行此操作。有没有建议如何做到这一点？

- kciesielski

Answer 1

这需要相当多的额外工作。以下是你需要做的大致概述。

• 创建两个比例尺，一个用于下部分，一个用于上部分。相应地设置区间和范围。
• 将值传递给下部比例尺，将它们限制在最大域值处，以使更长的条形图达到最大值。
• 将值传递给上部比例尺，过滤出低于最小值的值。

基本上，您需要创建两个对齐的图形，以给人一种只有一个图形的印象。如果您记住这一点，做起来不应该太难。

这里有一个快速而简单的概念验证，其中使用了线性比例尺的.clamp(true)来防止条形图在域之外的值变得过长。

- Lars Kotthoff

---

有道理。这里有一个替代方案，使用单一比例尺而不是 upper 和 lower。所谓单一比例尺，是指 var fullScale = d3.scale.linear().domain([0,5,15,30]).range([280,180,160,0])。这样可以用每个条形图一个矩形和一个 Y 轴来绘制图表。然后叠加断点符号，使条形和轴看起来分段。 - meetamit

谢谢，我尝试了这种方法，它可以工作，但需要相当多的管道。最终，我采取了另一种方法，在我的情况下运行良好且更易于开发。不过，你的答案解决了我的问题。 - kciesielski

@kciesielski，你能否发布你最终使用的代码？ - BBischof

Answer 2

“d3fc-discontinuous-scale component” 是一种组件，它可以适应其他比例尺（例如 d3 线性比例尺），并添加不连续性的概念。这些不连续性是通过“不连续性提供者”确定的，可以用于在比例尺中创建一个或多个“间隙”。

例如，要删除一个范围，可以按以下方式构建一个比例尺：

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

这里有一个完整的示例，展示如何使用它来创建一个“间断点”，以便呈现具有大范围差异的值。

https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681

- ColinE