Javascript d3:避免未更改的节点?
当通过d3.js传递数据时,库将数据划分为enter/update/exit组件,但我发现,对于那些通过重新计算并将属性重新设置为当前相同值而保持不变的值,我们在更新部分浪费了大量计算Javascript d3:避免未更改的节点?,javascript,performance,d3.js,Javascript,Performance,D3.js,当通过d3.js传递数据时,库将数据划分为enter/update/exit组件,但我发现,对于那些通过重新计算并将属性重新设置为当前相同值而保持不变的值,我们在更新部分浪费了大量计算 有什么好方法可以将“更新”集进一步划分为更改/未更改的集吗?您可以在更新选择中进行其他选择。也就是说,再次调用.selectAll(),使用选择器只获取需要更新的内容。当然,这假设您可以生成这样的选择器。一种方法可能是通过CSS类执行所有操作,并且在代码本身中不设置任何属性。然后可以根据CSS类进行选择 除此之外
有什么好方法可以将“更新”集进一步划分为更改/未更改的集吗?您可以在更新选择中进行其他选择。也就是说,再次调用
.selectAll()
,使用选择器只获取需要更新的内容。当然,这假设您可以生成这样的选择器。一种方法可能是通过CSS类执行所有操作,并且在代码本身中不设置任何属性。然后可以根据CSS类进行选择
除此之外,你真的无能为力。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...