When To Use Selection.data(...).something() Vs. Selection.merge().something() In D3?

I'm confused about the difference between UPDATE and MERGE in d3 when new data is joined to a selection. ENTER is easy; it applies to new elements. EXIT is easy; it applies to elem

Solution 1:

TLDR: update refers conceptually to a group of elements; .merge() is a method that can be used to combine the enter and update selections.

Update is a concept referring to the DOM elements that were in the DOM before the data change and remain there after the data change (i.e., the middle section of the Venn diagram in the link). There is no .update() method, however -- you get your update selection with .selectAll().

This can lead to some redundancy where you are applying the same attributes/styles to elements that just entered (the .enter() selection) and were already there. The .merge() method introduced in D3v4 provides a solution where you get a selection of both your enter and update elements.

It is still possible to carry out the update process without using .merge(), and there are some cases where it might still make sense to write separate statements for the enter and update selections.