D3 - Subselection (select, selectAll)


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

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

  • enter,
  • update
  • and exit.

Powered by ComboStrap