时序
🌐 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)
来源 · 对每个选定的元素,将过渡延迟设置为指定的毫秒数 value。
transition.delay(250);值可以指定为常量或函数。如果是函数,它会立即对每个被选元素按顺序进行评估,传入当前数据(d)、当前索引(i)和当前组(nodes),并且 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.
如果未指定 value,则返回过渡中第一个(非空)元素的延迟的当前值。这通常仅在你知道过渡恰好包含一个元素时才有用。
🌐 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将延迟设置为索引 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:
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(750);value 可以指定为常量或函数。如果是函数,则会立即针对每个被选元素按顺序进行求值,函数会接收当前数据(d)、当前索引(i)以及当前组(nodes),同时 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.
transition.duration() // 750transition.ease(value)
transition.ease(d3.easeCubic);必须将 value 指定为一个函数。缓动函数会在动画的每一帧中被调用,传入规范化时间 t,范围在 [0, 1] 内;然后它必须返回缓动后的时间 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.
如果未指定 value,则返回过渡中第一个(非空)元素的当前缓动函数。这通常只有在你知道过渡中恰好包含一个元素时才有用。
🌐 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.easeCubictransition.easeVarying(factory)
transition.easeVarying((d) => d3.easePolyIn.exponent(d.exponent));工厂必须是一个函数。它会对选择集的每个节点调用,传入当前数据(d)、当前索引(i)和当前组(nodes),同时this指向当前的 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.