d3：避免節點不變？

Question

當通過d3.js傳遞數據時，庫將數據划分為輸入/更新/退出組件，但我發現我們在更新部分中浪費了大量的計算，以便通過重新計算和重新計算來保持不變的值。將屬性設置為已經是當前的相同值。

有沒有什么好方法可以將“更新”集合進一步划分為已更改/未更改的集合？

Answer 1

您可以對更新選擇進行其他選擇。 也就是說，再次使用選擇器調用.selectAll() ，該選擇器僅為您提供需要更新的內容。 這當然假設您可以生成這樣的選擇器。 一種方法可能是通過CSS類完成所有操作，並在代碼本身中不設置任何屬性。 然后你可以根據CSS類選擇。

除此之外，你無能為力。 D3背后的整個想法是可視化由數據決定，如果數據不變，視覺元素也保持不變。

Answer 2

您可以使用d3過濾器功能根據任意值進一步過濾掉值。 我過去曾使用過這種模式：

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