producing a “live” graph with D3

问题:

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?

回答1:

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.

回答2:

Maybe this plugin can also be interesting: Cubism.

Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources. Cubism is available under the Apache License on GitHub.

---

edit:

An other interessant project can be Rickshaw which also leverages D3.

JavaScript toolkit for creating interactive real-time graphs

See this example: Random Data in the Future

回答3:

These are just two examples:

1. You can make the client pull the new data from the server at regular intervals (i.e. using some AJAX calls).
2. If the browser supports it, you can open a websocket towards the server, so that the server can directly push new data as soon as they are available.

Choosing one or the other depends on many variables: how many connections do you expect, what is the update rate of the data, which browsers you plan to support, etc...

In any case, the d3.js library is not involved in how you get the data, but instead in how you display them.