D3 - Operator

Card Puncher Data Processing


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 per element with access to data).

To tighten the scope of reference capture, D3 applies operators immediately; for example, D3’s attr operator immediately sets attributes on selected nodes and then returns.



The operator return value is the selection and therefore D3 supports method chaining.

For example, the append and insert operators add a new element for each element in the current selection, returning the added nodes, thus allowing the convenient creation of nested structures.



While the built-in operators satisfy most needs, the each operator invokes an arbitrary JavaScript callback for total generality.

Remove (elements)

The remove operator discards selected elements.


Once data is bound to elements, it is passed to functional operators as the first argument (by convention, d), along with the numeric index (i). These arguments were chosen for parity with JavaScript’s built-in array methods. This approach:

  • simplifies D3’s selection structure (requiring only one level of grouping) (???)
  • avoids variable arguments. (???)

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 - Event Listener (On Operator)

in D3. Special operators called event handlers respond to user input and enable interaction. D3’s on operator exposes the event listeners for native event types. For consistency with other functional...
Card Puncher Data Processing
D3 - Geom Module

The geom module exports various geometric operators, including: Voronoi tessellation, marching squares, convex hulls, polygon clipping and quadtrees.
Card Puncher Data Processing
D3 - Interaction (behaviors)

Interaction techniques are reused through behaviors. The zoom behavior implements panning and zooming by listening to mouse events; on pan or zoom, a custom event is dispatched to report a two dimensional...
Card Puncher Data Processing
D3 - SVG module

The svg module provides various shapes suitable for charting. The mbostock/d3/wiki/SVG-Shapesarc function, builds elliptical arcs as for pie and donut charts by mapping arbitrary data to paths; typically...

Share this page:
Follow us:
Task Runner