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