D3

Bound Data Doesn’t Update when Dynamically Updating D3

One big gotcha: select actually has side effects. It updates the bound data.

On the other hand, selectAll doesn’t update data, so we see this a lot:

d3.selectAll('.parent').data(...);

Because the .data part is where it updates the data.

It gets tricker when your parent div has children, because the children divs’ bound data will not update automatically. To update the bound data on a certain child, you need to select it:

// The side effect select has: update data
d3.selectAll('.parent').data(...).select('.child');

View Updates

After getting used to frameworks like React and Angular, it’s easy to forget that views don’t automatically update just because data does. For d3, at least, it doesn’t happen automatically. After dealing with the enters, the exits and the transitions, to update the current view, don’t forget to show the existing ones some love:

$selection.select('text').text(d => d.name);
Standard

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.