我目前正在處理一個問題,需要我的Web應用程序生成一個代表大約50k到60k點數據的圖表。它的加載速度相當快(〜6秒),但是我想知道是否可以使用D3.js在Web Worker中生成圖形,然後將SVG傳回以加載到頁面中。使用Web Worker和D3.js異步生成圖表?
回答
Web Workers沒有DOM訪問權限,所以你可以在這方面做的就是構建一些可以用來快速創建DOM的東西。工作人員可以例如處理數據集並執行所有繁重的計算,然後將結果作爲一組數組傳回。
https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9
最近由賈森·戴維斯承諾。 Mike Bostock說,將來的DOM依賴代碼將從d3.core中分離出來,這樣您就可以製作一個自定義的d3構建版本,可以與web-workers API配合使用。
我有一個問題,我有一個有大量節點的強制有向圖。感覺非常緩慢。我想以某種方式提高性能。我認爲在節點服務器上使用phantomJS的最後一個線程是一個好主意,但是這種方法所涉及的網絡延遲將破壞平滑的指向性的感覺。
那麼你在哪裏可以找到沒有dom依賴關係的剝離的D3? –
我設法利用網絡工作者做計算和絃佈局的和絃和組的以下內容:
創建D3的自定義生成不具有文檔對象上dependecy或在DOM(參見:https://github.com/mbostock/smash/wiki)
創建一個網絡工作者文件,並使用
importScripts
加載定製D3建立激活你的工人在您的渲染代碼。我用了一個承諾,封裝與工人通訊:
calculateChords = (padding, matrix) -> deferred = $.Deferred() worker = new Worker("worker.js") worker.onmessage = (e) -> deferred.resolve(e.data.groups, e.data.chords); worker.postMessage { matrix: matrix } deferred.promise()
後,在渲染功能:
calculateChords(matrix).then (groups, chords) -> ...
實際上,如果您在啓動時留下正確的(假的)物體以放置d3,您可以在網絡工作人員中運行標準d3。但是,主要的問題(在網絡工作者中使用d3)是發送和接收消息中的序列化開銷。我很想知道是否有人提出了一個使用可傳遞對象來消除序列化的好方法。 –
- 1. 使用d3.js修改c3.js圖表
- 2. D3.js如何生成可變寬度堆棧圖(Marimekko圖表)
- 3. D3.js圖表
- 4. 使D3.js圖表響應
- 5. 使用d3.js生成有向圖的搜索節點
- 6. 用D3生成一個「活動」圖表
- 7. 將標記放置到使用topoJSON和d3.js生成的地圖中
- 8. 使用D3.js的實時圖表
- 9. 使用d3.js和geojson顯示地圖
- 10. CSV使用d3.js與使用d3.js
- 11. 我可以在Firefox web worker中使用Javascript 1.7+迭代器和生成器嗎?
- 12. 使用birt,jsf和jsf4birt生成報表和生成圖表
- 13. Javascript:異步生成DOM中的大表。
- 14. Python異步回調和生成器
- 15. Web請求異步完成
- 16. d3.js - 餅圖中使用d3.js的3D視圖
- 17. 雙鏈表使用d3.js
- 18. Javascript - 等待web worker完成?
- 19. 使用d3.js和raphael
- 20. 爲每行CSV生成圓圈D3.js
- 21. 生成在d3.js多個元素
- 22. 與Word雲生成器碰撞(D3.JS)
- 23. 異步負載生成
- 24. 表示js-異步掛起
- 25. 同步d3.js地圖和傳單地圖
- 26. 條形圖.csv和d3.js
- 27. D3.js不顯示圖表
- 28. D3.js線圖表軸
- 29. 使用d3.js
- 30. 使用D3 JS
感謝。我擔心這將是答案。 – user1449496
這已經是一個古老的問題了,但是......關於phantomJS呢? – meetamit
@meetamit這可能是一個選項我猜,用phantomJS在服務器上生成DOM,然後將它傳遞給客戶端?但那不是使用Web Workers,而是這個問題。 –