使用D3生成"实时"图表

Question

我最近开始学习使用D3.js框架,虽然看起来它的设计完全符合我的要求,但我找不到一个简单的"实时"更新图示例.

我正在寻找类似于线图的东西,随着新数据的推出而更新.通过使用"最后看到的"时间戳或其他一些AJAX-y方法命中json url可以获得新数据.

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

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

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

Answer 1

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

我想补充几点意见:

异步数据

当您执行实时图表时,您经常会异常地获取数据,因此您无法知道每个"点"之间的确切时间.

• 对于该行,您很幸运,因为line教程中描述的并不关心.
• 对于具有平滑过渡效果的持续时间,它更棘手.关键是将持续时间设置为最后一帧和前一帧之间的时间.这也是下一个的良好近似值,因为网络几乎总是具有相同的吞吐量.

Y轴

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

性能

由于数据总是添加你可能要很细心的,你必须删除你不再使用的值的事实,否则你的数据会越来越重,整个动画可能会崩溃.

Answer 2

也许这个插件也很有趣:立体主义.

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

编辑:

另一个interessant项目可以是人力车也可以利用D3.

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

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

Answer 3

这只是两个例子:

1. 您可以使客户端定期从服务器提取新数据(即使用一些AJAX调用).
2. 如果浏览器支持它,您可以向服务器打开websocket,以便服务器可以在新数据可用时立即直接推送它们.

选择一个或另一个取决于许多变量:您期望的连接数,数据的更新率,您计划支持的浏览器等等......

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