Timing

The easing, delay and duration of a transition is configurable. For example, a per-element delay can be used to stagger the reordering of elements, improving perception. See Animated Transitions in Statistical Data Graphics for recommendations.

transition.delay(value)

Source · For each selected element, sets the transition delay to the specified value in milliseconds.

transition.delay(250);

The value may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The function’s return value is then used to set each element’s transition delay. If a delay is not specified, it defaults to zero.

If a value is not specified, returns the current value of the delay for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

transition.delay() // 250

Setting the delay to a multiple of the index i is a convenient way to stagger transitions across a set of elements. For example:

transition.delay((d, i) => i * 10);

Of course, you can also compute the delay as a function of the data, or sort the selection before computed an index-based delay.

transition.duration(value)

Source · For each selected element, sets the transition duration to the specified value in milliseconds.

transition.duration(750);

The value may be specified either as a constant or a function. If a function, it is immediately evaluated for each selected element, in order, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. The function’s return value is then used to set each element’s transition duration. If a duration is not specified, it defaults to 250ms.

If a value is not specified, returns the current value of the duration for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

transition.duration() // 750

transition.ease(value)

Source · Specifies the transition easing function for all selected elements.

transition.ease(d3.easeCubic);

The value must be specified as a function. The easing function is invoked for each frame of the animation, being passed the normalized time t in the range [0, 1]; it must then return the eased time tʹ which is typically also in the range [0, 1]. A good easing function should return 0 if t = 0 and 1 if t = 1. If an easing function is not specified, it defaults to easeCubic.

If a value is not specified, returns the current easing function for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element.

transition.ease() // d3.easeCubic

transition.easeVarying(factory)

Examples · Source · Specifies a factory for the transition easing function.

transition.easeVarying((d) => d3.easePolyIn.exponent(d.exponent));

The factory must be a function. It is invoked for each node of the selection, being passed the current datum (d), the current index (i), and the current group (nodes), with this as the current DOM element. It must return an easing function.