d3.js - 使用 D3 生成“实时”图

Question

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

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

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

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

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

Answer 1

本教程可以帮助您创建实时线图：http ://bost.ocks.org/mike/path/

我想补充几点意见：

异步数据

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

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

Y 轴

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

表现

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

Answer 2

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

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

---

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

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

请参阅此示例：未来的随机数据

Answer 3

这只是两个例子：

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

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

在任何情况下，d3.js 库都不涉及如何获取数据，而是涉及如何显示它们。