D3实时流图（图形数据可视化）[关闭]答案

【问题标题】：D3 Real-Time streamgraph (Graph Data Visualization) [closed]D3实时流图（图形数据可视化）[关闭]
【发布时间】：2012-03-28 17:01:22
【问题描述】：

我想要一个流图，如本例所示： http://mbostock.github.com/d3/ex/stream.html

但我希望实时数据从右侧输入，旧数据从左侧离开，这样我总是有一个包含 200 个样本的窗口。我该如何做才能获得适当的转换？

我尝试更改数组 a 中的数据点，然后重新创建一个区域

  data0 = d3.layout.stack()(a);

但我的转换并没有使图表看起来像在屏幕上滑动。

提前致谢。

【问题讨论】：

标签： javascript d3.js real-time transition stream-graph

【解决方案1】：

试试this tutorial:

在实现时序数据的实时显示时，我们经常使用 x 轴将时间编码为位置：随着时间的推移，新数据从右侧进入，而旧数据从左侧滑出。但是，如果您使用 D3 的内置 path interpolators，您可能会看到一些令人惊讶的行为...

要消除摆动，插入变换而不是路径。如果您将图表视为一个函数的可视化，这是有道理的——它的值没有改变，我们只是显示了域的不同部分。通过以与新数据到达相同的速率滑动可见窗口，我们可以无缝显示实时数据...

【讨论】：

谢谢！我浏览了本教程，但尝试将其外推到流图示例时遇到了很多麻烦。我终于用这行代码来转移我的多条路径。 vis.selectAll("path").data(data0).attr("d", area).attr("transform", null).transition().duration(50).ease("linear").attr( "变换", "翻译(" + -10 + ")").each("end", function (d,i) { if (i==0) transition();});我只能在第一条路径上递归调用转换，否则整个图会为每条路径移动一次，然后我会有大量的回调。有一个更好的方法吗？谢谢！
我在这里发布了我的示例：lyngbaek.com/real-time-stream-graph.html 每隔一段时间，底部的“路径”就会与“顶部”的路径不一致，这可能是我进行递归 transition() 调用的方式。我从您的教程中推断并为顶部和底部路径创建了一个单独的数据数组。然后我个人将一个新的价值推给他们每个人。然后我必须重新计算一个新的 d3.layout.stack() 并重新绘制它。然后我移动我的 2 个数据数组并重复。这是正确的方法，还是有更清洁的方法。再次感谢！
这就是我在这里寻找问题的大部分内容：stackoverflow.com/questions/12764813/…您如何建议将数据从服务器获取到客户端？
我已经在jsfiddle.net/gamealchemist/DAShs/1/..But写了waves，如何在D3js中创建这样的。你能给我样本吗
虽然这个答案理论上可以回答这个问题，it is better 在这里包括答案的基本部分，并提供参考链接。

【解决方案2】：

这是一个简单的例子： http://jsfiddle.net/cqDA9/1/ 它显示了跟踪和更新不同数据系列的可能解决方案。

var update = function () {
    for (Name in chart.chartSeries) {
        chart.chartSeries[Name] = Math.random() * 10;
    }
    for (Name in chart2.chartSeries) {
        chart2.chartSeries[Name] = Math.random() * 10;
    }
    setTimeout(update, 1000);
}
setTimeout(update, 1000);

【讨论】：