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

时间:2022-01-18 15:33:02

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。

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

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


34  

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


7  

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);

#1


34  

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


7  

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);