问题标签 [stream-graph]

我是 D3 的新手，所以我的问题可能很简单，但对我来说这是一个大问题。

问题：

如何垂直制作Streamgraph？我的 JSFiddle

我有这个：

我应该有这个：

小提琴在这里

JS

我尝试构建一个流图来随着时间的推移可视化相似的术语，但它总是为 y0 返回 NaN。我将我的解决方案与互联网上的几个解决方案进行了比较，但无法区分。这是代码：

github.com/adius/simterm

任何帮助将不胜感激，因为我快要发疯了。;'(

我想从 .csv 文件中的数据构建流图。我分叉了http://bl.ocks.org/lgrammel/1935509来生成流图，但我在加载数据时遇到了困难。我的JS在下面。

控制台日志很好地显示了数据数组，但我也得到了一个错误Error: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,N。http://bl.ocks.org/koremiklos/8052011上没有显示任何内容

链接到带有倾斜图的示例图像：

链接到 NVD3 Streamgraph 页面：

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

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

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

我是 d3.js 的新手，我正在努力填充多元百分位数图中线之间的区域。

• 我不希望在最底线下方或最顶线上方填充任何区域。
• 第一列将始终位于图表底部（第 5 个百分位）
• 最后一列将始终位于图表顶部（第 95 个百分位）
• 我需要每条线之间的单独区域段

我知道我需要定义一个区域来填充（y0，y1），如下所示：

但是我不知道该为 .y1 部分添加什么。理想情况下，我只需获取 TSV 中下一行的下一个值，但我不知道如何正确执行此操作。

出于测试目的，我有以下创建我需要的区域段之一：

我想要这样的东西，但这个例子没有帮助，因为它没有引用来自 csv/tsv 的不同行：

http://bl.ocks.org/mbostock/4060954

这个类似，但它是双变量的，而不是多变量的。

http://bl.ocks.org/mbostock/3894205

这是我正在进行的工作（查看源代码）：

http://artfuladvection.com/project/NOAA/percentilesGraph/multipercentile.html

我的 TSV 设置如下：

有什么帮助吗？

我是 processing.js 的新手，并尝试根据此处提供的开源代码创建流图https://github.com/jsundram/streamgraph.js/blob/master/src/streamgraph.pjs。我想知道如何在一个画布中绘制两个具有不同数据集的流图（一个在屏幕顶部，另一个在屏幕底部）。

我正在尝试构建与此类似的 D3 可视化：

（来源）

我最初开始尝试修改 Bostock 的渐变凹凸示例，但我倾向于认为流图布局在这里可能会更好地为我服务。随着时间的推移，我正在研究食品消费的变化。例如，数据看起来类似于：

流图布局很简单，可以开始了：

但是，我还需要像上图那样根据消耗量改变流的位置。我可以修改流布局来达到这个效果吗？还是我需要为此编写自定义布局？任何提示或想法都会有所帮助。

我需要使用 d3.js 设计一个流图，并开始试验托管在GitHub 上的代码。由于我的数据集预计在日期的最小值和最大值之间有不同的范围（可以是一个月或几年的时间），我决定对我的 x 轴上的刻度使用多尺度格式，而不是将格式和间隔固定为周、月、年等。例如，如果我将刻度格式保留为与 GitHub 上的示例代码中给出的相同方式

如果我的数据集中的日期范围跨越数年，x 轴的图例就会变得拥挤且难以阅读。

我尝试使用多尺度格式，但是无法绘制可视化，并且我的浏览器的开发工具返回以下错误：

d3.time.format.multi 不是函数

我真诚地希望有人可以建议我解决这个问题。

下面你可以看到我的完整代码：

首先，我使用来自 GitHub 示例的数据集：

我正在尝试使用从 Web 服务获取的数据重新创建GitHub 上呈现的交互式流图。我使用 GitHub 上示例中的相同代码来生成图形，但是我正在获取路径元素的 MNaN 和 NaN 坐标（准确地说，它们的 d 属性）。结果是一个空图，其中仅绘制了 x 和 y 轴，仅此而已。

为方便起见，这里是生成数据集的 Web 服务（在 C# 中）的代码：

编辑 1：我忘记将数据集成员的定义添加为 C# 类。我知道这个问题可能已经在一堆其他问题中丢失了，但是仍然非常感谢任何帮助：

编辑 2：我想出了一个示例数据集，结果证明它正在工作。我不是从网络服务中随机生成它，而是将它存储在一个 .csv 文件中，并以类似于 GitHub 中给出的代码的方式获取它。

键,值,日期 AB,100,01/08/13 AB,15,01/09/13 AB,35,01/10/13 AB,38,01/11/13 AB,22,01/12/13 AB,16,01/13/13 CD,35,01/08/13 CD,36,01/09/13 CD,37,01/10/13 CD,22,01/11/13 CD,24,01 /12/13 CD,26,01/13/13 EF,21,01/08/13 EF,25,01/09/13 EF,27,01/10/13 EF,23,01/11/13 EF ,24,01/12/13 EF,21,01/13/13 GH,10,01/08/13 GH,15,01/09/13 GH,35,01/10/13 GH,38,01/ 11/13 GH,22,01/12/13 GH,16,01/13/13

这也是一个非工作示例，从 web 服务获得的随机生成的数据集：

键,值,日期 AB,1,6/5/1992 AB,4,11/29/1992 AB,2,11/3/1993 A B,7,8/1/1995 AB,9,8/1/1996 AB,15,8/1/1997 CD,1,6/5/1992 C D,2,11/29/1992 CD,5,11/3/1993 CD,10,8/1/1995 CD,12,8 /1/1996 C D,19,8/1/1997 EF,1,6/5/1992 EF,20,11/29/1992 EF,16,11/3/1993 E F,6,8/1/1995 EF ,10,8/1/1996 EF,5,8/1/1997 GH,1,6/5/1992 G H,17,11/29/1992 GH,16,11/3/1993 GH,6,8/ 1/1995 GH,10,8/1/1996 G H,20,8/1/1997

我在 d3 中编写了一个函数，以便在示例页面中创建多个显示不同数据集的图。

我正在使用流图和堆栈布局，我无法理解为什么使用相同的代码可以使用 as offset 生成绘图zero，expand而silhouette在使用相同的数据集和相同的堆栈布局时，wiggle偏移量不会产生任何结果。（我已经不止一次阅读过文档）

特此摘录一段代码：

这是从返回的数据的结构stacked.datalayer()：

以下是结果的一些截图（使用相同的数据集）：

偏移“零”：

偏移“扩展”：

偏移“剪影”：

偏移“摆动”：