A transition is a selection-like interface to animate changes to DOM elements smoothly over time, instead of applying those changes instantaneously. To start a transition, select some elements, call selection.transition, and then apply the desired transition methods. For example:
d3.select("body")
.transition()
.style("background-color", "red");While transitions and selections share many similar methods, they operate somewhat differently; see below for details.
D3 has many built-in interpolators to tween arbitrary values. For example, you can transition from the font 500 12px sans-serif to 300 42px sans-serif, and D3 will find the numbers embedded within the string, interpolating both font size and weight automatically. To specify a custom interpolator, use transition.attrTween, transition.styleTween or transition.tween.
Only one transition of a given name may be active on a given element at a given time. However, multiple transitions with different names may be simultaneously active on the element, and multiple transitions with the same name may be scheduled on the element, provided they do not overlap in time. See transition.transition, for example.
If a newer transition starts on a given element, it automatically interrupts any active transition and cancels any pending transitions. This allows new transitions to supersede old transitions, such as in response to a user event, even if the old transitions were delayed. To manually interrupt transitions, use selection.interrupt. To run multiple transitions simultaneously on a given element or elements, give each transition a unique name.
For more on transitions, see Working with Transitions.
If you use NPM, npm install d3-transition. Otherwise, download the latest release. The released bundle supports AMD, CommonJS, and vanilla environments. Create a custom build using Rollup or your preferred bundler. You can also load directly from d3js.org:
<script src="https://d3js.org/d3-color.v0.4.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v0.4.min.js"></script>
<script src="https://d3js.org/d3-ease.v0.7.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v0.5.min.js"></script>
<script src="https://d3js.org/d3-selection.v0.7.min.js"></script>
<script src="https://d3js.org/d3-timer.v0.4.min.js"></script>
<script src="https://d3js.org/d3-transition.v0.1.min.js"></script>In a vanilla environment, a d3_transition global is exported. Try d3-transition in your browser.
# selection.transition([name])
…
# selection.interrupt([name])
…
# d3.transition([name])
Equivalent to:
d3.selection().transition(name)Also, d3.transition can be used to check whether something is an instanceof a transition, and to extend or modify the transition prototype.
# transition.select(selector)
…
# transition.selectAll(selector)
…
# transition.filter(filter)
…
# transition.merge(selection)
Returns a new transition merging this transition with the specified selection (or transition). The returned transition has the same number of groups, the same parents, the same name and the same id as this transition. Any missing (null) elements in this transition are filled with the corresponding element, if present (not null), from the specified selection. See selection.merge for more information.
# transition.transition()
…
# transition.selection()
Returns the selection corresponding to this transition.
# d3.active(node[, name])
Returns the active transition on the specified node with the specified name, if any. If no name is specified, the default empty name is used. Returns null if there is no such active transition on the specified node.
…
# transition.attr(name, value)
… Note that unlike selection.attr, value is required.
# transition.attrTween(name[, value])
…
# transition.style(name, value[, priority])
… Note that unlike selection.style, value is required.
# transition.styleTween(name[, value[, priority]]))
…
# transition.text(value)
… Note that unlike selection.text, value is required.
# transition.remove()
…
# transition.tween(name[, value])
…
Transitions may have per-element delays and durations, computed using functions of data (or index) as with other selection methods. For example, you can sort and reorder elements with a staggered delay to make the change in order easier to perceive. For more on this topic, see Animated Transitions in Statistical Data Graphics by Heer & Robertson.
# transition.delay([value])
…
# transition.duration([value])
…
# transition.ease([value])
…
…
# transition.on(typenames[, listener])
…
# transition.each(function)
…
# transition.call(function[, arguments…])
…
# transition.empty()
…
# transition.nodes()
…
# transition.node()
…
# transition.size()
…