Question

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

但它也应该能够在一个月或更长的时间内（可能长达一年）可视化数据，也可以在1分钟的时间间隔内。为SVG渲染这么多数据太多了。

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

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

你会推荐什么？

Answer 1

请注意，d3支持使用javascript的buffered arrays。具有数千个时间序列数据点的SVG图表在我的经验中运行良好（即使通过websockets在20ms更新时有多个实时数据流源）。

例如，如果您将所有数据打包在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毫秒都移动一次！）但是它们可以很容易地处理路径。

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

1 个答案: