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

Question

我创建了一个简单的折线图，其中包含来自 mySQL 数据库的数据，使用 PHP 以 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 重新渲染，它在画布上绘制点，允许在新数据到达时进行廉价的逐像素转换。