D3 实时流图(Graph Data Visualization) [英] 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 实时流图(Graph Data Visualization)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！