产生“活的”图D3 [英] producing a "live" graph with D3

问题描述

我最近开始学习使用D3.js框架，虽然它似乎设计完全按照我想要的方式，我找不到一个简单的活更新图表的例子。 p>

我正在寻找类似于新数据可用时更新的折线图。新数据可以通过使用最后看到时间戳或其他AJAX-y方法获取json网址。

edit：答案的D3部分在这里：

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

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

解决方案

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

我要添加更多评论：

异步数据

，你经常得到异步数据，因此你不能知道每个点之间的确切时间。

• 对于这一行，你很幸运，因为本教程中描述的行不在乎。


• 对于具有平滑过渡效果的持续时间，它是棘手的。关键是将持续时间设置为最后一帧和前一帧之间的时间。这也是下一个的好的近似，因为网络几乎总是具有相同的吞吐量。
线图，很容易确定y域。但是，对于实时数据，y值通常可以达到极限。这就是为什么我建议调用函数在每次迭代设置y域。您还可以创建边界框。




效果





由于数据始终添加，注意，您必须删除不再使用的值，否则您的数据将继续变得更重，整个动画可能会崩溃。




I've recently started learning to use the D3.js framework and, while it seems like it's been designed to do exactly what I want, I can't find a simple example of a "live" updating graph.

I'm looking for something like a line chart that updates as new data becomes available. New data would be obtained either by hitting a json url with a "last seen" timestamp or some other AJAX-y method.

edit: The D3 part of the answer is here:

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

Now, how do people recommend getting the new data from the server to the client?

解决方案

This tutorial can help you a lot to create a real time line graph: http://bost.ocks.org/mike/path/

I would like to add a few more comments:

Asynchronous data

When you do a real time graph, you often get the data asynchroneously, thus you cannot know the exact time between each "point".

• For the line, you are lucky because the line described in the tutorial doesn't care about that.
• For the duration to have a smooth transition effect, it is trickier. The key is to set the duration to be the time between the last frame and the previous one. This is also a good approximation for the next one as the network has almost always the same throughput.

Y Axis

On a conventional line graph, it is easy to determine the y domain. However with live data, the y value can often go off limit. This is why I would recommend calling a function to set the y domain at each iteration. You can also create a bounding box.

Performance

As the data is always added you might want to be very attentive to the fact that you HAVE to delete the values you don't use anymore, otherwise your data will keep getting heavier and the whole animation might crash.

这篇关于产生“活的”图D3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！