現在、Webアプリケーションで約5万から6万ポイントのデータを表すグラフを生成する必要がある問題に取り組んでいます。かなり速く(約6秒)読み込まれますが、D3.jsを使用してWeb Workerでグラフを生成し、SVGを返してページに読み込むことができるかどうか疑問に思っています。
3 に答える
https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9
JasonDaviesによる最近のコミット。Mike Bostockによると、将来的にはDOMに依存するコードがd3.coreから分離され、Web-workersAPIで動作するカスタムd3ビルドを作成できるようになります。
多数のノードを持つ力指向グラフがある場合にも同じ問題が発生しました。とても鈍い感じです。なんらかの形でパフォーマンスを向上させたい。ノードサーバー上のphantomJSを使用した最後のスレッドは良い考えだと思いますが、このアプローチに含まれるネットワーク遅延は、スムーズな力指向の感覚を台無しにします。
WebワーカーにはDOMアクセスがないため、その側でできることは、DOMをすばやく作成するために使用できるものを作成することだけです。ワーカーは、たとえばデータセットを処理し、すべての重い計算を実行してから、結果を配列のセットとして返すことができます。
次のようにして、Webワーカーを使用してコードとコードレイアウトのグループを計算することができました。
ドキュメントオブジェクトまたはDOMに依存しないd3のカスタムビルドを作成します(https://github.com/mbostock/smash/wikiを参照) 。
Webワーカーファイルを作成し
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) -> ...