我正在努力替換在 highcharts 中實作的動態圖表。當前的實作是一個線面積圖,隨著傳入的流資料隨著時間的推移而擴展,因此替換需要動態改變,最好是影片。
目前我正在尋找 D3 的替代品。我發現有幾個示例表明可能存在類似的情況,例如此處找到的流資料圖表,但在此示例中,每次迭代都會重新繪制線條。這并不是非常低效,因為可視化僅限于固定的資料視窗,但在我的情況下,隨著資料流入,需要從頭到尾顯示大量資料。每次添加時重新繪制圖表可能會導致快速性能損失。
在 D3 中,是否有一種方法可以將單個線段添加到不需要重繪的現有繪圖中?
uj5u.com熱心網友回復:
我最終放棄了 D3,因為它需要太多的開發才能使它像一個開箱即用的互動式圖表一樣美觀,但我確實弄清楚了如何做我的想法。
我沒有在每次迭代時重新添加帶有附加點的新線,而是最終使用了一個路徑組件,該組件允許逐步添加附加點。該路徑確實必須重新渲染并生成一個短的 svg 路徑字串,所以我不確定哪種方法更有效,但是在添加多個的情況下,短路徑字串可以降低生成的 html 的復雜性線到情節,每段一條。
如果對路徑的添加僅涉及使用原始字串的連接生成新字串,那么我想這可能比遍歷每次更新時增長的系列資料陣列更有效。
結果足夠快,足以跟上流資料,而 UI 沒有任何明顯的減慢,但不幸的是,我需要一些更先進的東西。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/485303.html
標籤:javascript d3.js
