D3 - Subselection (select, selectAll)

Card Puncher Data Processing


Whereas the top-level select methods query the entire document, a selection’s select and selectAll operators restrict queries to descendants of each selected element; we call this subselection.



d3.selectAll(“p”).select(“b”) returns the first bold (“b”) elements in every paragraph (“p”) element.

Empty Selection

On an empty svg element


returns an empty selection to bind data.

The next step would be to join data with it.

Data Join

Data Node Join

When new data (blue) are joined with old nodes (orange), three subselections result:

  • enter,
  • update
  • and exit.

Discover More
Data Node Join
D3 - Data (Operator|Join) (Data binding to elements)

The data operator (binds|joins) input data to selected nodes. The data join is a general pattern that can be used to create, update or destroy elements whenever data changes. The data-join takes as input...
Card Puncher Data Processing
D3 - Grouping

Subselecting via selectAll groups elements by ancestor. Thus: d3.selectAll(“p”).selectAll(“b”) groups by paragraph, while d3.selectAll(“p b”) returns a flat selection. Subselecting...
Card Puncher Data Processing
D3 - Selection

D3 adopts the W3C Selectors API to identify document elements for selection. Any number of operators can be applied to selected elements. These operators wrap the W3C DOM API, setting: attributes (attr),...

Share this page:
Follow us:
Task Runner