D3 - Transition

About

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.

Articles Related

Example

d3.select("body")    
    .transition()
    .duration(1000)
    .on("start", function repeat() {
        d3.active(this)
            .style("background-color", "red")
          .transition()
            .style("background-color", "green")
          .transition()
            .style("background-color", "blue")
            .on("start", repeat);
      });

Rendered by WebCode

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()
    .duration(750);
line.transition(t)
    .attr("x1", x)
    .attr("x2", x);
text.transition(t)
    .attr("x", x);

Chained

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.

svg.selectAll("circle")
  .transition()
    .duration(2500)
    .delay(function(d) { return d * 40; })
    .on("start", slide);
function slide() {
  d3.active(this)
      .attr("cx", width)
    .transition()
      .attr("cx", 0)
    .transition()
      .on("start", slide);
}

See Chained Transitions and Chained Transitions II

Documentation / Reference

Chained Transitions and Chained Transitions II