Web WorkerとD3.jsを使用して非同期にグラフを生成しますか？

Question

私は現在、約50k〜60kポイントのデータを表すグラフをWebアプリケーションで生成する必要がある問題を解決しています。かなり速く（〜6秒）ロードされますが、D3.jsを使用してWebワーカーでグラフを生成し、SVGを渡してページにロードすることが可能かどうかは疑問です。

Answer 1

WebワーカーにはDOMアクセス権がありません。そのためにできることは、DOMをすばやく作成するために使用できるものを構築することだけです。作業者は、例えば、データセットを処理し、すべての重い計算を行い、その結果をアレイのセットとして戻すことができる。

Answer 2

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

最近のジェイソン・デイヴィスによってコミット。 Mike Bostockによれば、将来はDOM依存コードがd3.coreから分離され、WebワーカーAPIで動作するカスタムd3ビルドを作成することができます。

私は、多数のノードを持つ強制的なグラフを持っているのと同じ問題がありました。それは非常に鈍いと感じます。私は何らかの形でパフォーマンスを向上させたい。私は、ノードサーバ上のphantomJSを使った最後のスレッドは良い考えだと思うが、このアプローチに含まれるネットワークの待ち時間は、スムーズな力指向の感覚を損なうだろう。

Answer 3

私は次のようにしてウェブ労働者を使用して、コードレイアウトの和音とグループを計算するために管理：

1. は、ドキュメントオブジェクト上dependecyを持っていませんD3のカスタムビルドを作成したり、 DOM（参照：https://github.com/mbostock/smash/wiki）を

2. は、Webワーカーファイルを作成し、カスタムd3は

3. を構築ロードするためにimportScriptsを使用して、あなたのレンダリングコードであなたの労働者を有効にします。

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