D3实时流图(图数据可视化)

I would like a stream graph as in this example: http://mbostock.github.com/d3/ex/stream.html

我想要一个流图，比如这个例子:http://mbostock.github.com/d3/ex/stream.html。

but I would like real time data entering from the right and have old data leave from the left, such that I always have a window of 200 samples. How would I do this such that I have the appropriate transitions?

但我希望实时数据从右边输入，并从左边保留旧数据，这样我总有一个200个样本的窗口。我要怎样做才能使我有合适的过渡?

I tried changing the data points in the array a and then recreating an area as such

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

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

but my transitions do not make it look like the chart is sliding across the screen.

但是我的转换并不能使它看起来像图表在屏幕上滑动一样。

Thanks in advance.

提前谢谢。

2 个解决方案

#1

Try this tutorial:

尝试本教程:

When implementing realtime displays of time-series data, we often use the x-axis to encode time as position: as time progresses, new data comes in from the right, and old data slides out to the left. If you use D3’s built-in path interpolators, however, you may see some surprising behavior...

当实现时间序列数据的实时显示时，我们经常使用x轴来编码时间作为位置:随着时间的推移，新的数据从右边进来，旧的数据向左边滑去。然而，如果你使用D3的内置路径插值器，你可能会看到一些令人惊讶的行为……

To eliminate the wiggle, interpolate the transform rather than the path. This makes sense if you think of the chart as visualizing a function—its value isn’t changing, we’re just showing a different part of the domain. By sliding the visible window at the same rate that new data arrives, we can seamlessly display realtime data...

为了消除波动，插入转换而不是路径。如果你把图表想象成一个函数，它的值是不变的，我们只是展示了域的不同部分，这是有意义的。通过滑动可视窗口与新数据到达的速度相同，我们可以无缝地显示实时数据…

#2

Here is a simple example: http://jsfiddle.net/cqDA9/1/ It shows a possible solution to keeping track and updating the different data series.

这里有一个简单的示例: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);