使用 D3 生成“实时”图

Posted 2023-02-16

【中文标题】使用 D3 生成“实时”图

【英文标题】：producing a "live" graph with D3

【发布时间】：2012-09-27 16:55:54

【问题描述】：

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

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

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

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

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

【参考方案1】：

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

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

---

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

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

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

【讨论】：

-1 表示立体主义，因为我没有从 repo 中找到任何示例。人力车 +1，看起来像一个活跃的项目和大量的例子！

点赞！他们是不是也翻译了svg里面的“g”组来实现新数据进来时的移动效果

【参考方案2】：

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

我想再添加几个cmets：

异步数据

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

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

Y 轴

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

性能

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

【讨论】：

push(), 带补间的 Shift() 是要走的路 +1

如果您的数据是时间序列并且有时间戳，这是否会受到任何影响，因为您提到您无法知道每个点之间的确切时间

【参考方案3】：

这只是两个例子：

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

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

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

【讨论】：

是的，假设客户端拉变量，是否有任何涉及 D3 的工作示例？我对 javascript 不太了解，有一些工作示例会很棒......

@ChrisWithers 我想您可以使用任何 JavaScript 库来进行 AJAX 调用。我不记得d3.js 是否实现了其中任何一个，但您始终可以使用jQuery（我认为这是最受欢迎的）。

谢谢！我的用例将是 ExtJS 已经在使用的地方，如果有人在实时更新 D3 图中有一个管道示例，数据由普通 JS 或 ExtJS-y 提供，那就太好了:-)跨度>