Exit selection

As explained in D3.js in Action, Third Edition

An exit selection is the set of document elements whose associated data items are no longer present and that therefore need to be removed.

An exit selection contains document elements whose associated data items no longer appear in the updated dataset. In D3, these elements must leave the visualization, such as circles representing cetaceans excluded by a filter. section 7.4.2 section 7.5

Use the exit selection as one part of D3’s data-update lifecycle:

• Bind updated data with data(updatedData, d => d.uid) so persistent data remains associated with the same visual elements. section 7.4.2
• Let join() handle the lifecycle automatically, or pass separate enter, update, and exit functions when each state needs different behavior. section 7.4.2
• Apply a transition to exiting marks when a filter changes, creating a visible departure instead of an abrupt disappearance. section 7.4 section 7.4.2

Filtering a cetacean scatterplot

A scatterplot initially displays all cetacean species. Selecting a hemisphere filter produces a smaller dataset; circles for species no longer included form the exit selection and move downward as new circles enter from above. A key function keeps continuing species attached to their existing circles. section 7.4 section 7.4.2

Figure 7.15 Visualization of cetacean species that we’ll build in this section

Use the visualization to see how filtering changes the displayed set of cetacean marks. section 7.4

How D3.js in Action, Third Edition covers it

How deep it goes

Explains the selection lifecycle, keyed identity, and separate join callbacks, without detailing broader interaction techniques.

Examples

Uses a filtered cetacean scatterplot whose departing circles animate downward while entering circles fall from above.

What it assumes

Assumes familiarity with D3 selections and data binding while teaching enter, update, and exit behavior through a working scatterplot.

What you can do after

Apply it via D3’s join callbacks to control obsolete SVG elements during filtered data updates.

How it connects

Connects exit selections to data joins, enter selections, update selections, key functions, transitions, and the DOM.

liveBookmanning.com

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

Related concepts

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

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.