D3

时序 ​

¥Timing

过渡的 easing、delay 和 duration 是可配置的。例如，每个元素的延迟可用于元素的 错开重新排序，从而改善感知。建议请参阅 统计数据图形中的动画过渡。

¥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) {#transition_delay} ​

源代码 · 对于每个选定元素，将过渡延迟设置为指定的值（以毫秒为单位）。

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

js
transition.delay(250);

值可以指定为常量或函数。如果是函数，则会立即按顺序为每个选定元素评估该函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将 this 作为当前 DOM 元素。该函数的返回值随后会用于设置每个元素的过渡延迟。如果未指定延迟，则默认为零。

¥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.

js
transition.delay() // 250

将延迟设置为索引 i 的倍数，是一种方便地在一组元素之间交遗漏渡的方法。例如：

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

js
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) {#transition_duration} ​

源代码 · 对于每个选定元素，将过渡持续时间设置为指定的值（以毫秒为单位）。

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

js
transition.duration(750);

值可以指定为常量或函数。如果是函数，则会立即按顺序为每个选定元素评估该函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将 this 作为当前 DOM 元素。该函数的返回值随后会用于设置每个元素的过渡持续时间。如果未指定持续时间，则默认为 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 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.

js
transition.duration() // 750

transition.ease(value) {#transition_ease} ​

源代码 · 为所有选定元素指定过渡 缓动函数。

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

js
transition.ease(d3.easeCubic);

值必须指定为函数。动画的每一帧都会调用缓动函数，并传递 [0, 1] 范围内的标准化时间 t；它必须返回缓和时间 tʹ，该时间通常也在 [0, 1] 范围内。良好的缓动函数应该在 t = 0 时返回 0，在 t = 1 时返回 1。如果未指定缓动函数，则默认为 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.

js
transition.ease() // d3.easeCubic

transition.easeVarying(factory) {#transition_easeVarying} ​

示例 · 源代码 · 为转换 缓动函数 指定工厂。

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

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

工厂函数必须为函数。它会针对选择的每个节点调用，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将其作为当前 DOM 元素。它必须返回一个缓动函数。

¥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.