Transitions

Transitions

API Reference

A transition is a special type of selection where the operators apply smoothly over time rather than instantaneously. You can derive a transition from a selection using the transition operator, or by using the top-level d3.transition method followed by a subselect. While transitions generally support the same operators as selections (such as attr and style), not all operators are yet supported; for example, you must append elements before a transition starts. A remove operator is provided for convenient removal of elements when the transition ends.

Transitions may have per-element delays and durations, computed using functions of data similar to other operators. This makes it easy to stagger a transition for different elements, either based on data or index. For example, you can sort elements and then stagger the transition for better perception of element reordering during the transition. For more details on these techniques, see "Animated Transitions in Statistical Data Graphics" by Heer & Robertson.

D3 has many built-in interpolators to simplify the transitioning of arbitrary values. For instance, you can transition from the font string "500 12px sans-serif" to "300 42px sans-serif", and D3 will in find the numbers embedded within the string, interpolating both font size and weight automatically. You can even interpolate arbitrary nested objects and arrays or SVG path data. D3 also allows custom interpolators should you find the built-in ones insufficient; you can specify a custom interpolator using the attrTween and styleTween operators. D3's interpolators also provide the basis for the scale module, and can be used independently from transitions; an interpolator is a function that maps a parametric value t in the domain [0,1] to a color, number or arbitrary value.

Starting Transitions

# d3.transition()

Start an animated transition.

# transition.delay(value)

Specify per-element delay in milliseconds.

# transition.duration(value)

Specify per-element duration in milliseconds.

# transition.ease(value)

Specify transition easing function.

Operating on Transitions

Content

# transition.attr(name, value)

Smoothly transition to the new attribute value.

# transition.attrTween(name, tween)

Smoothly transition between two attribute values.

# transition.style(name, value[, priority])

Smoothly transition to the new style property value.

# transition.styleTween(name, tween[, priority])

Smoothly transition between two style property values.

# transition.text(value)

Set the text content when the transition starts.

# transition.remove()

Remove selected elements at the end of a transition. If the transition is cancelled, the selected elements will not be removed.

Subtransitions

# transition.select(selector)

Start a transition on a descendant element for each selected element. Inherits easing, duration and delay.

# transition.selectAll(selector)

Start a transition on multiple descendants for each selected element. Inherits easing, duration and delay.

Control

# transition.each(type, listener)

Add a listener for transition events. Currently only supports "end" events. There is no way to remove the event listener. And, this operator has the same name as the selection each operator, which is somewhat confusing. It should probably be renamed to "on" or "onEach".

# transition.call(function)

Call a function passing in the current transition.

Easing

# d3.ease(name[, arguments…])

Customize transition timing.

Interpolation

# d3.interpolate(a, b)

Interpolate two values.

# d3.interpolateNumber(a, b)

Interpolate two numbers.

# d3.interpolateRound(a, b)

Interpolate two integers.

# d3.interpolateString(a, b)

Interpolate two strings.

# d3.interpolateRgb(a, b)

Interpolate two colors in RGB space.

# d3.interpolateHsl(a, b)

Interpolate two colors in HSL space. The resulting interpolator still returns an RGB color string for browser compatibility, however.

# d3.interpolateArray(a, b)

Interpolate two arrays of values.

# d3.interpolateObject(a, b)

Interpolate two arbitrary objects.