D3 - Transition

1 - About

Transition implementation in D3

A transition is a selection-like interface for animating changes to the document. Instead of changing the document instantaneously, transitions smoothly interpolate the document from its current state to the desired target state over a given duration.

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;

Standard easing functions are specified by name. Example:

  • “elastic”,
  • “cubic-in-out”
  • and “linear”

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.

Transitions are often initiated by events, such as:

  • the arrival of new data over the wire
  • or user interaction.

Since transitions are not instantaneous — they have a duration — that could mean multiple transitions competing to control the fate of elements. To avoid this, transitions should be exclusive, allowing a newer transition to pre-empt (to interrupt) an older one. However, such exclusivity should not be global. Multiple concurrent transitions should be allowed, as long as they operate on different elements. If you quickly toggle between stacked and grouped bars below, you can send waves rippling across the chart: See Stacked-to-Grouped Bars. 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.

3 - Example

D3 v4: transition is synchronized 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);

4 - 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

5 - Documentation / Reference

  • Bookmark "D3 - Transition" at del.icio.us
  • Bookmark "D3 - Transition" at Digg
  • Bookmark "D3 - Transition" at Ask
  • Bookmark "D3 - Transition" at Google
  • Bookmark "D3 - Transition" at StumbleUpon
  • Bookmark "D3 - Transition" at Technorati
  • Bookmark "D3 - Transition" at Live Bookmarks
  • Bookmark "D3 - Transition" at Yahoo! Myweb
  • Bookmark "D3 - Transition" at Facebook
  • Bookmark "D3 - Transition" at Yahoo! Bookmarks
  • Bookmark "D3 - Transition" at Twitter
  • Bookmark "D3 - Transition" at myAOL
d3/transition.txt · Last modified: 2017/01/20 18:11 by gerardnico