D3实时流图（图形数据可视化） [英] D3 Real-Time streamgraph (Graph Data Visualization)

问题描述

我想要一个流图，如下例所示：
：

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

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

I would like a stream graph as in this example: 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?

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

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

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

Thanks in advance.

解决方案

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...

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...

这篇关于D3实时流图（图形数据可视化）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！