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

Question

关闭。这个问题需要多问 focused 。目前不接受答案。

---

想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post .

已关闭 6 年前。

Improve this question

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

但我希望实时数据从右侧输入，旧数据从左侧离开，这样我总是有一个包含 200 个样本的窗口。我该如何做到这一点才能实现适当的转换？

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

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

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

提前致谢。

Answer 1

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