大d3.js圖形，畫布或服務器端渲染？

我使用d3.js來顯示時間序列 - 從我的python後端（通過Websocket）發送的數據。一張圖表的通常數據量約爲120個條目（數據2小時，每分鐘1條）。這運行正常，每分鐘更新一次。大d3.js圖形，畫布或服務器端渲染？

但它也應該能夠將數據從一個月或更長時間（可能長達一年）可視化，也可以在1分鐘間隔內進行。對於SVG渲染這樣的數據量太多了。

我想下面的可選方法：

在畫布渲染它。它真的快得多嗎？
切換到另一個庫，如Highchart.js（看到一個演示〜約50k條目）
呈現服務器上的SVG/JPG/PNG。使用例如d3.js服務器端渲染d3.js的任何經驗phantom.js？我想重用已經寫好的圖模型。但它也可以是任何其他能夠呈現數據的圖書館（使用python生成圖表）

您會推薦什麼？

來源

2013-07-01 Beastcraft

我想說的是超酷的[渲染客戶端上的SVG文件]（http://net.tutsplus.com/tutorials/why-arent-you-using-svg/）方法。 – Droogans

@Droogans是的，我已經在爲小圖做這件事。但我的問題是大圖（數據量巨大）.. – Beastcraft

嗯... D3應該運行良好，120個數據點。您對d3解決方案有什麼問題？畫布非常適合展示從秒到秒變化的圖表 - 是的，速度非常快。但交互性不強（如下鑽或彈出信息註釋）。如果您有靜態圖表（已保存到圖像的圖表），則可以通過在畫布內呈現靜態圖像，然後使用更新的數據點（您提到的可重用性）根據需要更新畫布來開始畫布。 – markE

請注意，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\[email protected]\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)));

當然，如果你有所有的數據，這應該更容易。你是否可以繪製點而不是單一路徑？我發現瀏覽器與繪製成千上萬個單獨的圈子（特別是如果他們都每20ms移動一次都會移動）鬥爭，但他們可以很容易地處理一條路徑。

來源

2013-07-30 01:37:24 Hardbyte

大d3.js圖形，畫布或服務器端渲染？

回答

相關問題