我正在使用 d3.js 可视化从我的 python 后端(通过 Websocket)发送的时间序列数据。 通常一张图表的数据量约为 120 个条目(2 小时数据,每分钟 1 个条目)。这运行良好,每分钟更新一次。
但它还应该能够可视化一个月或更长时间(可能长达一年)的数据,同样以 1 分钟为间隔。 渲染如此大量的数据对于 SVG 来说太多了。
我正在考虑以下替代方案:
- 在 Canvas 中渲染它。真的有那么快吗?
- 切换到另一个库,例如 Highchart.js(观看了包含约 50k 个条目的演示)
- 在服务器上呈现 SVG/JPG/PNG。使用例如渲染 d3.js 服务器端的任何经验幻影.js?我想重用已经编写好的图形模型。但它也可以是任何其他能够呈现数据的库(使用 python 生成图形)
你会推荐什么?
最佳答案
注意 d3 支持使用 javascript 的 buffered arrays .具有数千个时间序列数据点的 SVG 图在我的经验中运行良好(即使通过 websockets 以 20 毫秒的速度更新多个实时数据流源)。
例如,如果您用 Python 打包所有数据;您可能不需要在实时 View 中执行此操作,因为您的更新速度相对较慢:
import struct
# fake data point
p = [56435367, 200, 1]
# <=little endian, d=float64 (for time), d=float64
msg_str = struct.pack('<' + 'd' * len(p), *p)
print(msg_str)
b'\x00\x00\x008\x15\xe9\x8aA\x00\x00\x00\x00\x00\x00i@\x00\x00\x00\x00\x00\x00\xf0?'
然后通过你的 websocket 获取 javascript,在那里你可以做类似的事情:
this.ws.onmessage = function(e){
// Just pump the raw bytes straight into CircularBuffer
graph.databuffer.push(e.data);
...
当你想绘图时,假设 g 是你对 D3 svg 的引用:
// Get a Float64Array containing all the values
var series_data = graph.databuffer.get_array_stream();
g.attr("d", graph.line(d3.zip(time, series_data)));
当然,如果您预先拥有所有数据,这应该会更容易。您可能正在绘制点而不是单一路径吗?我发现浏览器很难绘制数万个单独的圆圈(尤其是如果它们每 20 毫秒都移动一次!)但它们可以非常轻松地处理一条路径。
关于python - 大 d3.js 图形、 Canvas 或服务器端渲染?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17409978/