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