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

Question

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

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

但是，我找不到 Rickshaw 或 d3.js 的任何开箱即用功能来执行此类操作。关于如何制作一个的任何建议？

Answer 1

这将需要相当多的额外工作。这是您必须做的事情的概要。

• 创建两个比例，一个用于下部，一个用于上部。相应地设置域和范围。
• 将值传递到较低的比例，将它们限制在最大域值，这样较长的条将达到最大值。
• 将值传递到上限，过滤那些低于最小值的值。

您基本上需要创建两个相互对齐的图表，以给人一种只有一个的印象。如果你牢记这一点，做到这一点应该不会太难。

这是一个快速而肮脏的概念证明，它使用线性比例.clamp(true)来防止条形对于域外的值变得太长。

Answer 2

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

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

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

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

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