带有模拟数据的“实时”图表d3.js

Question

我使用PHP创建了一个简单的线图，其中包含来自mySQL数据库的数据，以返回JSON格式的数据。

https://gist.github.com/5fc4cd5f41a6ddf2df23

我想模拟“实时”更新类似于此示例的内容，但不太复杂： http://bl.ocks.org/2657838

我一直在寻找有关如何实现这一目标的例子，只是作为D3的新手 - 无济于事。

我看过Mike Bostock的http://bost.ocks.org/mike/path/路径转换，但不知道如何使用json数据实现它。

任何人都可以帮助我做一个例子或一些方向来实现这个目标吗？

Answer 1

在SVG中进行这种线转换是很棘手的，因为移动大量的点只需要一点点并重新渲染完整的行可能会影响性能。

对于与每个数据点的交互性不是最重要且时间序列可以增长到包含任意数量的点的情况，请考虑使用Cubism。它是一个基于d3的库，但专门用于有效地可视化时间序列数据。为了防止SVG的重新渲染，它在画布上绘制点，在新数据到达时允许逐像素转换。