V4 swivels off a touch of mysticism from the enter and update selection. When we called the update selection in V3.x it did the job for both enter and update. So all specs you wrote for the update selection were automatically applied to the enter selection. The enter selection wasn't immutable - as in: the elements in the enter selection could be changed from outside, with a data-update for example.
V4 changes that and the enter selection becomes immutable. In simple words: you can modify the enter selection in place and you can modify the update selection in place. But you can't modify the update selection and assume the enter selection will be automatically updated. No no no. Here we need merge. It takes enter selection and update selection and chucks them both into a pot.
If you load this page, enter and update will be seperate. Hence, the numbers will not be tomato-coloured as after loading the page all elements were new, so we only see modifications to enter selection.
When we hit the button, we invoke the same update selection, but now with merge. By using the .merge([selection]) method on the update selection we combine all elements from the enter and the update selection. Any modifications will now apply to both selections.
Much cleverer put:
Built with blockbuilder.org
https://d3js.org/d3.v4.min.js