2012-06-11 61 views
10

我目前正在處理一個問題,需要我的Web應用程序生成一個代表大約50k到60k點數據的圖表。它的加載速度相當快(〜6秒),但是我想知道是否可以使用D3.js在Web Worker中生成圖形,然後將SVG傳回以加載到頁面中。使用Web Worker和D3.js異步生成圖表?

回答

5

Web Workers沒有DOM訪問權限,所以你可以在這方面做的就是構建一些可以用來快速創建DOM的東西。工作人員可以例如處理數據集並執行所有繁重的計算,然後將結果作爲一組數組傳回。

+1

感謝。我擔心這將是答案。 – user1449496

+0

這已經是一個古老的問題了,但是......關於phantomJS呢? – meetamit

+0

@meetamit這可能是一個選項我猜,用phantomJS在服務器上生成DOM,然後將它傳遞給客戶端?但那不是使用Web Workers,而是這個問題。 –

4

https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9

最近由賈森·戴維斯承諾。 Mike Bostock說,將來的DOM依賴代碼將從d3.core中分離出來,這樣您就可以製作一個自定義的d3構建版本,可以與web-workers API配合使用。

我有一個問題,我有一個有大量節點的強制有向圖。感覺非常緩慢。我想以某種方式提高性能。我認爲在節點服務器上使用phantomJS的最後一個線程是一個好主意,但是這種方法所涉及的網絡延遲將破壞平滑的指向性的感覺。

+1

那麼你在哪裏可以找到沒有dom依賴關係的剝離的D3? –

1

我設法利用網絡工作者做計算和絃佈局的和絃和組的以下內容:

  1. 創建D3的自定義生成不具有文檔對象上dependecy或在DOM(參見:https://github.com/mbostock/smash/wiki

  2. 創建一個網絡工作者文件,並使用importScripts加載定製D3建立

  3. 激活你的工人在您的渲染代碼。我用了一個承諾,封裝與工人通訊:

    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) -> 
        ... 
    
+1

實際上,如果您在啓動時留下正確的(假的)物體以放置d3,您可以在網絡工作人員中運行標準d3。但是,主要的問題(在網絡工作者中使用d3)是發送和接收消息中的序列化開銷。我很想知道是否有人提出了一個使用可傳遞對象來消除序列化的好方法。 –