如何将水平中断应用于d3.js条形图

Question

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

使用对数标度（我猜）这里不是一个选项，因为那时条形图中堆栈之间的比例会被破坏。我想引入一个横向中断，如下图所示：

然而，我找不到Rickshaw或d3.js的任何开箱即用功能来做这样的事情。有关如何制作一个的任何建议吗？

Answer 1

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

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

您基本上需要创建两个彼此对齐的图形，以给人一种只有一个的印象。如果你记住这一点，那么这样做应该不会太困难。

这是一个快速而肮脏的proof of concept，它使用线性刻度的.clamp(true)来防止条形图对域外的值变得太长。

Answer 2

d3fc-discontinuous-scale component适应任何其他比例（例如d3线性比例）并添加不连续的概念。这些不连续性是通过“不连续性提供者”确定的，该提供者可用于在量表中创建一个或多个“差距”。

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

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

这是一个完整的示例，演示了如何使用它在比例中创建“中断”，以呈现在整个范围内具有较大间隙的值。

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