大d3.js图形,画布或服务器端渲染？

Question

我正在使用d3.js可视化时间序列 - 从我的python后端发送的数据(通过Websocket).一张图的通常数据量约为120个条目(2小时数据,每分钟1个条目).这个运行正常,每分钟都会更新.

但它也应该能够在一个月或更长的时间内(可能长达一年)可视化数据,也可以在1分钟的间隔内.为SVG渲染这么大量的数据太多了.

我正在考虑以下替代方案:

• 在画布中渲染它.它真的快得多吗？
• 切换到另一个库,如Highchart.js(看到一个带有~50k条目的演示)
• 在服务器上渲染SVG/JPG/PNG.有关使用例如phantom.js渲染d3.js服务器端的经验吗？我想重用已经编写过的图形模型.但它也可以是任何其他能够呈现数据的库(使用python生成图形)

你会推荐什么？

Answer 1

请注意，d3 支持使用 javascript 的缓冲数组。根据我的经验，包含数千个时间序列数据点的 SVG 绘图效果很好（即使是通过 Websocket 以 20 毫秒更新的多个实时数据流源）。

例如，如果您将所有数据打包在 Python 中；您可能不需要在实时视图中执行此操作，因为您的更新速度相对较慢：

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 毫秒移动一次！），但它们可以非常轻松地处理路径。