D3 - Transition

Card Puncher Data Processing


Transition implementation in D3


A transition happens on a selections of element.

Immediately after creating a transition, such as by selection.transition or transition.transition, you may configure the transition using methods such as:

  • transition.delay,
  • transition.duration,
  • transition.attr
  • and transition.style.

Transitions export the style and attr operators of selections with identical syntax, but interpolate from the current to specified value gradually over time.

  • To stagger animation for individual elements, the delay and duration of transitions can be specified as functional operators.
  • Easing can also be customized;

Powering D3’s transitions is a collection of interpolators for diverse types:

  • numbers;
  • strings with embedded numbers (e.g., font sizes, path data);
  • RGB and HSL colors;
  • and arbitrary nested arrays or objects.

If needed, custom interpolators can be specified. An example of such customization is animating value changes in a pie chart; the bound arc data are interpolated in polar coordinates, rather than interpolating the Cartesian coordinates of the path strings.

Transitions dispatch events to registered listeners as each element finishes animating, allowing sequential transitions and post-animation cleanup such as removing exiting elements. Due to staggering, elements may finish at different times. D3 automatically manages transition scheduling, guaranteeing per-element exclusivity and efficient, consistent timing through a unified timer queue.

D3’s transitions are exclusive per element by default. If you need greater exclusivity, there’s selection.interrupt, which interrupts the active transition on the selected elements. In D3 4.0, selection.interrupt both interrupts the active transition, if any, and cancels all scheduled transitions.


    .on("start", function repeat() {
            .style("background-color", "red")
            .style("background-color", "green")
            .style("background-color", "blue")
            .on("start", repeat);

Composition / Inheritance

D3 v4: transition can be passed between two selections. The line and the text will inherit the same transition duration.

var t = d3.transition()
    .attr("x1", x)
    .attr("x2", x);
    .attr("x", x);


D3 transitions are finite sequences. Most often, a transition is just a single stage, transitioning from the current state of the document to the desired target state. However, sometimes you want more elaborate sequences that go through several stages.

D3 has no dedicated method for infinite transition sequences, but you can create a new transition when an old one ends by listening to transition start or end events.

D3 4.0 introduces d3.active, which returns the active transition on the specified element.

    .delay(function(d) { return d * 40; })
    .on("start", slide);
function slide() {
      .attr("cx", width)
      .attr("cx", 0)
      .on("start", slide);

See Chained Transitions and Chained Transitions II

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 - (Element) Lifecycle (The three state: Enter, Update, Exit)

The element lifecycle in D3 has the three state: enter, update and exit They are the output of a data join operation Defining the state of the element during a data join is crucial for efficient...
Card Puncher Data Processing
D3 - Animation

in D3 Animated transitions can be derived from selections using the transition operator.
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...

Share this page:
Follow us:
Task Runner