D3实时流图（图形数据可视化）

Question

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

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

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

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

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

提前致谢。

Answer 1

尝试this tutorial：

  

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

     

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

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