“活”图d3.js与模拟数据 [英] "Live" graph d3.js with simulated data

问题描述

我已经创建了一个简单的线图与来自mySQL数据库的数据使用PHP返回JSON格式的数据。

https://gist.github.com/5fc4cd5f41a6ddf2df23

我想模拟live更新与此示例类似的内容，但不太复杂：
http://bl.ocks.org/2657838

我一直在搜索

我看过Mike Bostock的 http://bost.ocks.org/mike/path/ 路径转换，但不知道如何使用json数据实现此操作。

解决方案

任何人都可以帮助我们完成这个任务的一个例子或一些方向。

在SVG中执行这种类型的线转换是棘手的，因为移动大量的点只是一点点，并重新渲染整个线会损害性能。

对于与每个数据点的交互性不是最重要的并且时间序列可以增长到包含任意数目的点的情况，请考虑使用立体主义。它是一个基于d3的库，专门用于高效地可视化时间序列数据。为了防止SVG的重绘，它在画布上绘制点，以便在新数据到达时实现便宜的逐像素转换。

I have created a simple line graph with data from a mySQL database using PHP to return the data in JSON format.

https://gist.github.com/5fc4cd5f41a6ddf2df23

I would like to simulate "live" updating something similar to this example, but less complicated: http://bl.ocks.org/2657838

I've been searching for examples on how to achieve this simply as new to D3 - to no avail.

I've looked at Mike Bostock's http://bost.ocks.org/mike/path/ path transitions, but not sure how to implement this using json data.

Can anyone help with either an example or some direction on how I could accomplish this?

解决方案

Doing that kind of line transformations is tricky in SVG because moving large number of points just a little and rerendering the complete line can hurt performance.

For the case when interactivity with each data point is not paramount and the time series can grow to contain arbitrary number of points, consider using Cubism. It is a library based on d3 but meant specially for visualizing time-series data efficiently. To prevent rerendings of SVG, it draws the points on a canvas, allowing for cheap pixel by pixel transitions as new data arrives.

这篇关于“活”图d3.js与模拟数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！