dc.js - DC.js - 复合图表 - 行间填充

Question

我想知道是否有一种方法可以组成一个包含 3 条线的图表，以有效地围绕核心数据创建一个阈值/波段：

第 1 行 - 显示实际核心数据点 第 2 行 - 显示位于核心上方 n 处的上线 第 3 行 - 显示位于核心下方 n 处的下方

核心数据将是一条没有区域填充的线，但我想填充 2 和 3 之间的区域以显示核心后面的 n。

我尝试添加额外的线条并将下一行的颜色设置为透明，但上一行绘制了。

speedSumGroup       = runDimension.group().reduceSum(function(d) {return d.Speed * d.Run;}),
  speedSumGroupUpper    = runDimension.group().reduceSum(function(d) {return (d.Speed * d.Run) + 1000;}),
  speedSumGroupLower = runDimension.group().reduceSum(function(d) {return (d.Speed * d.Run) - 1000;})
  ;

小提琴

编辑1 ：使用堆叠线查看此小提琴，d3 StackLayout 参数设置为 order=Ascending / Offset=Expand。现在的问题是令人讨厌的剩余区域填充在底部。我使用 Expand 的原因是因为它应用了正确的 y 值。如果我能以某种方式使用 Wiggle，但强制数据绘制在同一个 y 轴上而不是堆叠上，那么我们（几乎）就赢了。

标签： dc.js