How deeply does D3.js in Action, Third Edition cover join()?

Explains the selectAll-data-join pattern, enter-update-exit states, and keyed identity, stopping short of broader D3 internals.

Join()

As explained in D3.js in Action, Third Edition

join() is a D3 selection method that reconciles document elements with bound data and handles enter, update, and exit selections.

join() reconciles a D3 selection with a dataset. Chained after selectAll() and data(), it creates one SVG element for each datum, binding each element to its data. section 3.3 section 3.6

selection
  .selectAll("selector")
  .data(myData)
  .join("element to add");

Use the three-method pattern to connect a selection, dataset, and element type. section 3.3

The same pattern updates an existing visualization. When filtered data changes, join() determines which elements enter, update, or exit, so a scatterplot can add, retain, and remove circles with little code. section 7.4.2

For stable updates, handle the three selection states deliberately:

Enter creates new elements and can initialize them before a transition. section 7.4.2
Update retains elements already displayed and applies changed attributes or positions. section 7.4.2
Exit represents elements no longer present and removes them from the DOM. section 7.4.2
Pass a key function to data() when elements must keep representing the same datum across reordered or filtered data. section 7.4.2

Filtering a scatterplot

Filtering cetaceans changes the dataset passed to data(). Using d => d.uid as the key keeps surviving circles attached to the same cetaceans instead of matching elements by position. section 7.4.2

How D3.js in Action, Third Edition covers it

liveBook manning.com

Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

update selectionuses · An update selection is the set of document elements that already correspond to data items and remain associated during a data join.
enter selectionuses · An enter selection is the set of data items that lack corresponding document elements and therefore require new elements to be created.
exit selectionuses · An exit selection is the set of document elements whose associated data items are no longer present and that therefore need to be removed.
data bindingimplements · Data binding is a technique that connects application data or state to user-interface elements or component properties so values or behavior can be represented or synchronized.

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.