Source: https://d3js.org/d3-transition

Skip to content

Return to top

d3-transition ​

================================================================

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

To apply a transition, select elements, call selection.transition , and then make the desired changes. For example:

js

d3.select("body")
  .transition()
    .style("background-color", "red");

Transitions support most selection methods (such as transition.attr and transition.style in place of selection.attr and selection.style ), but not all methods are supported; for example, you must append elements or bind data before a transition starts. A transition.remove operator is provided for convenient removal of elements when the transition ends.

To compute intermediate state, transitions leverage a variety of built-in interpolators . Colors , numbers , and transforms are automatically detected. Strings with embedded numbers are also detected, as is common with many styles (such as padding or font sizes) and paths. To specify a custom interpolator, use transition.attrTween , transition.styleTween or transition.tween .

See one of:

• Selecting elements

• Modifying elements

• Timing

• Control flow