使用 D3 生成“实时”图

Question

我最近开始学习使用 D3.js 框架，虽然它的设计似乎完全符合我的要求，但我找不到“实时”更新图的简单示例。

我正在寻找像折线图这样的东西，它会随着新数据的可用而更新。新数据可以通过点击带有“最后一次看到”时间戳的 json url 或其他一些 AJAX-y 方法来获得。

编辑：答案的 D3 部分在这里：

http://bost.ocks.org/mike/path/

现在，人们建议如何从服务器获取新数据到客户端？

Answer 1

这个插件可能很有趣：Cubism。

Cubism.js 是一个用于可视化时间序列的 D3 插件。使用立体主义 构建更好的实时仪表板，从 Graphite、Cube 中提取数据 和其他来源。 Cubism 在 Apache 许可下可用 GitHub。

---

另一个有趣的项目可能是 Rickshaw，它也利用了 D3。

用于创建交互式实时图表的 JavaScript 工具包

请看这个例子：Random Data in the Future

Answer 2

本教程对创建实时折线图有很大帮助：http://bost.ocks.org/mike/path/

我想再添加几个cmets：

异步数据

当你做一个实时图表时，你经常会异步获取数据，因此你无法知道每个“点”之间的确切时间。

• 对于这条线，你很幸运，因为教程中描述的line 并不关心这一点。
• 要获得平滑过渡效果的持续时间，这比较棘手。关键是将持续时间设置为最后一帧和上一帧之间的时间。这也是下一个很好的近似值，因为网络几乎总是具有相同的吞吐量。

Y 轴

在传统的折线图上，很容易确定 y 域。然而，对于实时数据，y 值通常会超出限制。这就是为什么我建议在每次迭代时调用一个函数来设置 y 域。您还可以创建一个边界框。

性能

由于始终添加数据，您可能需要非常注意必须删除不再使用的值，否则您的数据会越来越重，整个动画可能会崩溃。

Answer 3

这只是两个例子：

1. 您可以让客户端定期从服务器拉新数据（即使用一些 AJAX 调用）。
2. 如果浏览器支持，你可以向服务器打开一个websocket，这样服务器就可以直接push新数据一到。

选择其中一个取决于许多变量：您期望有多少连接、数据的更新率是多少、您计划支持哪些浏览器等等...

无论如何，d3.js 库并不涉及如何获取数据，而是如何显示它们。