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



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

但它也应该能够在1分钟内可视化一个月或更长时间(可能长达一年)的数据。呈现如此大量的数据对SVG来说太多了。

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

  • 在画布中渲染它。真的那么快吗
  • 切换到另一个库,如Highchart.js(看到一个约有5万个条目的演示)
  • 在服务器上渲染SVG/JPG/PNG。有使用phantom.js等渲染d3.js服务器端的经验吗?我想重用已经编写好的图形模型。但它也可以是任何其他能够渲染数据的库(使用python生成图形)

你推荐什么?

请注意,d3支持使用javascript的缓冲数组。根据我的经验,具有数千个时间序列数据点的SVG绘图效果良好(即使有多个实时数据源通过网络套接字以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'x00x00x008x15xe9x8aAx00x00x00x00x00x00i@x00x00x00x00x00x00xf0?'

然后通过你的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)));

当然,如果你有所有的数据,这应该会更容易。你是不是在绘制点而不是一条路径?我发现浏览器很难绘制数万个单独的圆圈(尤其是如果它们每20ms移动一次!),但它们可以很容易地处理路径。

相关内容

  • 没有找到相关文章

最新更新