d3: Avoid unchanged nodes?

Question

When passsing data through d3.js, the library divides the data into enter/update/exit components, but I've found that we waste a good deal of computation in the update section for values that are unchanged by re-computing and re-setting the attributes to the same value which is already current.

Is there any good way to further divide the "updated" set into changed/unchanged sets?

Answer 1

You could do another selection on your update selection. That is, call .selectAll() again with a selector that gets you only the things that need to be updated. This of course assumes that you can produce such a selector. One approach might be to do everything through CSS classes and set no attributes in the code itself. Then you could select based on the CSS class.

Apart from that, there's nothing you can really do. The whole idea behind D3 is that the visualisation is determined by the data and if the data is unchanged, the visual elements remain unchanged as well.

Answer 2

You can use the d3 filter function to further filter out the values based upon any arbitrary values. I've used this pattern in the past:

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