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);