D3.jsでオンザフライでデータを減らす

Question

JSONデータの円を示すD3を使用してSVGをレンダリングしています。ズームとドラッグをサポートしたいJSON構造は非常に大きくなる可能性があります。ここに私の主な問題があります：

• すべてのJSONエントリの円を追加することは実際には機能しません。ページにはDOM内に何千もの<circle>要素があるので、遅すぎるようになります。
  • を私はドラッグ機能で更新したデータセットの縮小コピーを保持：私はそれを解決していますどのよう

  。 Iは、全データセットと現在の軸所与の表示されている中心座標を有するreducedDataサークルにのみプッシュ越える

var reducedData = [];

：各ドラッグイベントで、私は、空のデータセットを宣言する。私はSVGを消去し、reducedDataを使ってそれを再描画します。私はすべてのズームイベントで同じ処理を行い、現在の拡大率を考慮して半径が5ピクセルを超える円をreducedDataに追加するだけです。

ページは非常に反応性があり、うまくいくように見えますが、非常に効率が悪く、これを行うには最良の方法ではないと私は確信しています。私の問題に対する代替の解決策は何ですか？ありがとう。

Answer 1

もちろん、常に改善の余地がありますが、私はあなたのアプローチがすでに十分に良いと思っています。しかし、ここであなたがそう思っている場合は、あなた自身で検討したりテストしたりするためのいくつかのポイントがあります。

まず、最適化が本当に必要かどうかを確認することをお勧めします。 Google Chromeの最新バージョンでは、DevToolsの[パフォーマンス]タブで、CPUスロットルを使用して低速のデバイスをシミュレートすることができます。 timeline toolを使用すると、データ削減またはDOM操作によってボトルネックが発生し、フレームレートが低下しているかどうかを確認できます。もしそうでなければ、それを汗ばませないで、あなたは行くのが良い。

データ量の削減によってレンダリングが遅くなった場合は、タイムラインツールを使用して、どこが遅いのかを正確に突き止め、より速い選択肢を調べることができます。

DOM操作で問題が発生した場合は、general update patternを使用していることを確認してください。本当に必要な場合にのみ要素を作成または削除します。さらに、新しいものを作成するのではなく、duplicating themによってサークルの作成をスピードアップすることができます。

通常、あまりにも多くのデータ項目を視覚化する必要がある場合は、最後の手段としてSVGからキャンバスベースの視覚化に切り替えるが、私はあなたの状況には過度のものだと思う。

質問がありましたら、お手伝いします。

Answer 2

データの高速フィルタリングにCrossfilter.jsを使用しました。そうすれば、私は手動でデータセットのコピーを減らす必要はありません。ドラッグ＆ズームの各イベントで簡単にフィルタリングすることができます。答えた皆様、ありがとうございます。

Answer 3

私がこの問題をどのように解決したかは、ユーザーがパン/ズームしているときに表示されるsvg要素のみを更新することでした。

function pointInDomain(d, domain) { 
    return d.x < domain[1] && d.x > domain[0] 
} 

function zoomed() { 
    xz = d3.event.transform.rescaleX(x); 
    xGroup.call(xAxis.scale(xz)); 

    var domain = xz.domain(); 

    clippedArea.selectAll("circle") 
    .style("visibility", d => pointInDomain(d, domain) ? "visible" : "hidden") 
    .filter(d => pointInDomain(d, domain)) 
    .attr("cx", d => xz(d.x)); 
} 

JSFiddle