大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圖表在我的經驗中運行良好（即使通過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毫秒移動一次！）但是它們可以很容易地處理路徑。