为什么 NVD3 StreamGraph 会随着时间推移 y 零轴？答案

【问题标题】：Why does the NVD3 StreamGraph shift the y zero axis over time?为什么 NVD3 StreamGraph 会随着时间推移 y 零轴？
【发布时间】：2014-02-05 23:48:01
【问题描述】：

Link to sample image 带有倾斜图：

Link to NVD3 Streamgraph page:

nvd3 流图将随时间急剧下降或上升。我搜索了 SO 和 NVD3 文档，但没有找到一个变量来控制 y 轴的零在每个时间点的位置。我也没有找到关于这个的讨论。换句话说，是什么让整个图表向一个方向或另一个方向倾斜，以及如何控制或关闭这种倾斜。

我读了一些 Byron 关于流图的初始论文，但无法弄清楚，我想我会在这里问。

有人可以指点我这方面的文档或以其他方式提供见解吗？

【问题讨论】：

不确定您的意思——y 比例应随时间保持不变，即 0 始终位于相同的 y 位置。任何上升或下降都会在数据中。
您能否发布带有用于创建该图像的 NVD3 选项的代码？数据可能仍居中，但您的某个区域以白色绘制...
这是代码：pastebin.com/wuxpRE48 谢谢@LarsKotthoff 和 AmeliaBR。基本上，当我选择一个单独的变量时，以“F”为例，在流格式中，图形中心从 5 下降到零。它是轴的这种下降的“倾斜”，我无法弄清楚它基于数据的哪一部分。即，“F”的一个实例在 Y 轴上高于另一个是什么意思？谢谢！！
我可以重现您的问题，我怀疑这是由于您的数据中存在大量空值造成的——只要面积变为零，中心线就会被甩掉。即使我将 y-accessor 函数更改为 .y(function(d) { return d[1]||0 }) 以使您得到 0 而不是 null，它仍然会抛出该区域的计算。 D3 有一种方法可以识别和排除区域/折线图中的空值，并相应地将路径分成子区域，但我不确定它是如何在 NVD3 中实现的。如果我弄清楚了，我会回复你...
您对图 only 作为流图是否满意？（即，没有切换到普通堆叠图的选项。）因为如果是这样，设置以下选项似乎有效：chart.style('stream-center').showControls(false);。我不确定为什么他们有两种不同的算法来计算流图，以及为什么另一种算法（您使用chart.style('stream') 获得）是默认附加到控制按钮的，但您可能想向他们发送问题通知.

标签： graph d3.js data-visualization nvd3.js stream-graph

【解决方案1】：

堆积面积图的NVD3 code 接受四种可能的图表样式：stack、stream、stream-center 和 expand。默认流图是“流”样式，如果您的数据中有任何零值，这是偏离中心的版本。

如果您将样式明确设置为“流中心”，则图表将按预期运行。但是，在显示样式之间切换的单选按钮会切换回有问题的算法，因此需要禁用它们。

chart.style('stream-center')
     .showControls(false);

这种其他显示算法的存在可能意味着 NVD3 人员正在研究它。 github 问题页面可能是寻找更新或回复的好地方：

https://github.com/novus/nvd3/issues/416

【讨论】：