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

Question

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

但是我想从右边输入实时数据并从左边离开旧数据,这样我总是有一个200个样本的窗口.我该如何做到这一点,以便我有适当的过渡？

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

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

但我的过渡并没有让它看起来像图表在屏幕上滑动.

提前致谢.

Answer 1

试试这个教程:

在实现时间序列数据的实时显示时,我们经常使用x轴将时间编码为位置:随着时间的推移,新数据从右侧进入,旧数据向左滑动.但是,如果您使用D3的内置路径插补器,您可能会看到一些令人惊讶的行为......

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

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