Learn D3.js

Tweening and text transitions

Tweening is the process of producing intermediate animation frames. To move from blue to red or from 10 to 20, a tween operation obtains an intermediate value for each animation frame during the duration of the transition. The default attribute and style tweening uses interpolators from the d3-interpolate module and easing functions from the d3-ease module to compute the intermediate values.

The simplest way to tween is to set values for the attr() or style() attributes on a transition object that is different than the values set for the original selection. Attribute tweening is demonstrated in the following code. The circle has two attributes that you can tween, but only one of them is used for the transition: ...