d3：変更されていないノードは避けますか？

Question

データをd3.jsに渡すとき、ライブラリはデータを入力/更新/終了コンポーネントに分割しますが、再計算によって変更されない値については、更新セクションで多くの計算が無駄になります。すでに現在の値と同じ値に属性を再設定します。

「更新済み」セットをさらに変更/変更しないセットにさらに分割する良い方法はありますか？

Answer 1

更新プログラムの選択で別の選択を行うこともできます。つまり、.selectAll()を再度呼び出すと、更新が必要なものだけが表示されます。もちろんこれはセレクタを生成できると仮定しています。 1つのアプローチは、CSSクラスを通してすべてを行い、コード自体に属性を設定しないことです。次に、CSSクラスに基づいて選択することができます。

それ以外には、本当に何もできません。 D3の背後にある全体の考え方は、視覚化がデータによって決定され、データが変更されない場合、視覚的要素も変わらないことである。

Answer 2

d3 filter関数を使用すると、任意の値に基づいて値をさらにフィルタすることができます。私は過去にこのパターンを使用しました：

# store the extra value in the DOM to use for filtering later on: 
selection.attr('data-someExtraValue', function(d) { return d.someExtraValue; }); 

# during the 'update' phase, filter out values who's someExtraValue hasn't changed: 
filteredSelection = selection.filter(function(d) { return d.someExtraValue != parseInt(d3.select(this).attr('data-someExtraValue')); }); 

# do updates on the filtered selection rather than the initial selection...