請注意,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移動一次都會移動)鬥爭,但他們可以很容易地處理一條路徑。
我想說的是超酷的[渲染客戶端上的SVG文件](http://net.tutsplus.com/tutorials/why-arent-you-using-svg/)方法。 – Droogans
@Droogans是的,我已經在爲小圖做這件事。但我的問題是大圖(數據量巨大).. – Beastcraft
嗯... D3應該運行良好,120個數據點。您對d3解決方案有什麼問題?畫布非常適合展示從秒到秒變化的圖表 - 是的,速度非常快。但交互性不強(如下鑽或彈出信息註釋)。如果您有靜態圖表(已保存到圖像的圖表),則可以通過在畫布內呈現靜態圖像,然後使用更新的數據點(您提到的可重用性)根據需要更新畫布來開始畫布。 – markE