D3 - Selection

Card Puncher Data Processing


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),
  • styles (style),
  • properties (property),
  • HTML (html)
  • and text (text) content.

D3’s selection operators such as attr, style and property allow to specify the value either as:

  • a constant (the same for all selected elements)
  • or a function (computed separately for each element).

Since each selection is simply an array, elements can also be accessed directly (e.g., [0]).

If you’re using a DOM framework like React, you probably don’t need selections (if you don’t need transitions)

Nested / Hierarchy Selection


  • .each allows a function to be called on each element of a selection
  • .call allows a function to be called on the selection itself.

Documentation / Reference

Discover More
Card Puncher Data Processing
D3 - (Architecture|Design)

D3’s atomic operand is the selection: a filtered set of elements queried from the current document. Operators act on selections, modifying content. Data joins bind input data to elements, enabling...
Card Puncher Data Processing
D3 - Animation

in D3 Animated transitions can be derived from selections using the transition operator.
Card Puncher Data Processing
D3 - Data

Input Data is specified as an array of arbitrary values, such as: numbers, strings or objects. The data format and their related processing is agnostic. : The data operator binds input data...
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 - Getting Started

Whether you’re building a static chart or a dynamic one with fluid transitions and object constancy, your code remains roughly the same. See also: The...
Card Puncher Data Processing
D3 - Operator

Operators act on selections, modifying content. Operator values are specified either as constants or functions; the latter (the functions) are evaluated for each element. (The functions are evaluated...
Data Node Join
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. ...
Card Puncher Data Processing
D3 - Transition

Transition implementation in D3 d3/d3-transition A transition happens on a selections of element. Immediately after creating a transition, such as by selection.transition or transition.transition, you...

Share this page:
Follow us:
Task Runner