私は現在、約50k〜60kポイントのデータを表すグラフをWebアプリケーションで生成する必要がある問題を解決しています。かなり速く(〜6秒)ロードされますが、D3.jsを使用してWebワーカーでグラフを生成し、SVGを渡してページにロードすることが可能かどうかは疑問です。Web WorkerとD3.jsを使用して非同期にグラフを生成しますか?
答えて
WebワーカーにはDOMアクセス権がありません。そのためにできることは、DOMをすばやく作成するために使用できるものを構築することだけです。作業者は、例えば、データセットを処理し、すべての重い計算を行い、その結果をアレイのセットとして戻すことができる。
https://github.com/mbostock/d3/commit/43d38773623b52209d2667287a1ae626fb95b0d9
最近のジェイソン・デイヴィスによってコミット。 Mike Bostockによれば、将来はDOM依存コードがd3.coreから分離され、WebワーカーAPIで動作するカスタムd3ビルドを作成することができます。
私は、多数のノードを持つ強制的なグラフを持っているのと同じ問題がありました。それは非常に鈍いと感じます。私は何らかの形でパフォーマンスを向上させたい。私は、ノードサーバ上のphantomJSを使った最後のスレッドは良い考えだと思うが、このアプローチに含まれるネットワークの待ち時間は、スムーズな力指向の感覚を損なうだろう。
DOM依存関係のないD3をどこから見つけるのですか? –
私は次のようにしてウェブ労働者を使用して、コードレイアウトの和音とグループを計算するために管理:
は、ドキュメントオブジェクト上dependecyを持っていませんD3のカスタムビルドを作成したり、 DOM(参照:https://github.com/mbostock/smash/wiki)を
は、Webワーカーファイルを作成し、カスタムd3は
を構築ロードするために
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) -> ...
実際には、Webワーカーで、実際にd3を起動してd3をarroundに置いたままにしておくと、標準のd3を実行できます。しかし、(Webワーカーとd3を使用する際の)主な問題は、送受信メッセージのシリアライゼーションオーバーヘッドです。私は非常に誰かがシリアル化を取り除くために転送可能なオブジェクトを使用するための素晴らしい方法を考え出しているかどうかを知ることに非常に興味があります。 –
- 1. 非同期機能を使用していないときに非同期エラーが発生しますか?
- 2. Phantomjsを使用してD3.jsからSVGグラフを出力する
- 3. D3.jsを使用した階層的な力のグラフ
- 4. CanBeNullとReSharper - 非同期タスクで使用していますか?
- 5. JavaScriptを使用してWebページに画像を非同期にロードする
- 6. Web Workerを使用してファイルからImageImageを取得する
- 7. D3.jsを使用した線グラフ(在庫グラフ)の間違ったプロット
- 8. d3.jsを使ったズーム棒グラフ
- 9. web2pyを使用した非同期バックグラウンドプロセス
- 10. d3.jsとnvd3.jsで序数x軸を使用する線グラフ
- 11. d3.jsを使用してc3.jsチャートを変更する
- 12. Web-Workerでメッセージを同期的に待機する
- 13. System.Media.SoundPlayerを使用して非同期にサウンドファイルを再生する方法
- 14. Goliathを使用した非同期Web処理
- 15. ASP.NET C#5 Async&Awaitを使用した非同期Webアプリケーション
- 16. worker/tutorialsの同期ファイルapi?
- 17. d3.jsとcrossfilterデータを使用してヒストグラムを作成する方法は?
- 18. nvd3を使用して複数のグラフを同期する
- 19. lambdaを非同期コールバックとして使用する
- 20. Webサービスを非同期として定義する場所
- 21. FormCollectionからのデータを使用して非同期HttpClientポストリクエストを作成する
- 22. d3.jsを使用して.csvからデータをインポートする
- 23. カーソルアダプタを使用した非同期リストビュー
- 24. NSURLConnectionを使用した非同期ダウンロードキュー
- 25. XCTestを使用した非同期メソッドテスト
- 26. async.jsを使用した非同期ツリートラバーサル
- 27. Mojoliciousを使用した非同期チャットサーバ
- 28. Webページを非同期でロードしています
- 29. d3.jsを使用して積み重なった棒グラフを作成する際の助けが必要
- 30. 非同期にNSThreadを実行しますが、デリゲートを使用しますか?
感謝を。私はこれが答えになるのではないかと心配しました。 – user1449496
これはすでに古い質問ですが、... phantomJSはどうですか? – meetamit
@meetamitこれはオプションだと思いますが、phantomJSを使ってサーバー上にDOMを生成し、それをクライアントに渡しますか?しかしそれはウェブワーカーを使用していませんが、これが問題でした。 –