修改元素
¥Modifying elements
选择元素并使用 selection.transition 创建转换后，使用转换的转换方法来影响文档内容。
¥After selecting elements and creating a transition with selection.transition, use the transition’s transformation methods to affect document content.
transition.attr(name, value) {#transition_attr}
源代码 · 对于每个选定元素，将具有指定名称的属性的 属性补间 赋值给指定的目标值。补间的起始值是过渡开始时属性的值。目标值可以指定为常量或函数。如果是函数，则会立即按顺序为每个选定元素评估该函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将 this 作为当前 DOM 元素。
¥Source · For each selected element, assigns the attribute tween for the attribute with the specified name to the specified target value. The starting value of the tween is the attribute’s value when the transition starts. The target 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.
如果目标值为 null，则在过渡开始时移除该属性。否则，根据目标值的类型选择插值器，使用以下算法：
¥If the target value is null, the attribute is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm:
如果 value 为数字，则使用 interpolateNumber。
¥If value is a number, use interpolateNumber.
如果 value 为 color 或可强制转换为颜色的字符串，则使用 interpolateRgb。
¥If value is a color or a string coercible to a color, use interpolateRgb.
¥Use interpolateString.
要应用不同的插值器，请使用 transition.attrTween。
¥To apply a different interpolator, use transition.attrTween.
transition.attrTween(name, factory) {#transition_attrTween}
源代码 · 如果指定了工厂 (factory) 且不为空，则将具有指定名称的属性的属性 tween 分配给指定的插值器工厂。插值器工厂是一个返回 interpolator 的函数；过渡开始时，会按顺序为每个选定元素评估工厂函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将当前组作为当前 DOM 元素。返回的插值器将按顺序为过渡的每一帧调用，并传递 eased 时间 t，通常在 [0, 1] 范围内。最后，插值器的返回值将用于设置属性值。插值器必须返回一个字符串。（要在过渡开始时移除属性，请使用 transition.attr；要在过渡结束时移除属性，请使用 transition.on 监听 end 事件。）
¥Source · If factory is specified and not null, assigns the attribute tween for the attribute with the specified name to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is 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 returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the attribute value. The interpolator must return a string. (To remove an attribute at the start of a transition, use transition.attr; to remove an attribute at the end of a transition, use transition.on to listen for the end event.)
如果指定的工厂为 null，则删除先前分配的指定名称的属性补间（如果有）。如果未指定工厂，则返回具有指定名称的属性的当前插值器工厂，如果不存在这样的补间，则返回 undefined。
¥If the specified factory is null, removes the previously-assigned attribute tween of the specified name, if any. If factory is not specified, returns the current interpolator factory for attribute with the specified name, or undefined if no such tween exists.
例如，将填充属性从红色插入到蓝色：
¥For example, to interpolate the fill attribute from red to blue:
transition.attrTween("fill", () => d3.interpolateRgb("red", "blue"));或者像 transition.attr 一样，从当前填充色插值到蓝色：
¥Or to interpolate from the current fill to blue, like transition.attr:
transition.attrTween("fill", function() {
return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});或者应用自定义彩虹插值器：
¥Or to apply a custom rainbow interpolator:
transition.attrTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);此方法可用于指定自定义插值器，例如支持 SVG 路径 的插值器。一种有用的技术是数据插值，其中 interpolateObject 用于插值两个数据值，然后使用结果值（例如，使用 shape）计算新的属性值。
¥This method is useful to specify a custom interpolator, such as one that understands SVG paths. A useful technique is data interpolation, where interpolateObject is used to interpolate two data values, and the resulting value is then used (say, with a shape) to compute the new attribute value.
transition.style(name, value, priority) {#transition_style}
源代码 · 对于每个选定元素，将指定名称的样式的 样式补间动画 分配给具有指定优先级的指定目标值。当过渡开始时，补间的起始值是样式的内联值（如果存在），否则是其计算值。目标值可以指定为常量或函数。如果是函数，则会立即按顺序为每个选定元素评估该函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将 this 作为当前 DOM 元素。
¥Source · For each selected element, assigns the style tween for the style with the specified name to the specified target value with the specified priority. The starting value of the tween is the style’s inline value if present, and otherwise its computed value, when the transition starts. The target 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.
如果目标值为 null，则在过渡开始时移除该样式。否则，根据目标值的类型选择插值器，使用以下算法：
¥If the target value is null, the style is removed when the transition starts. Otherwise, an interpolator is chosen based on the type of the target value, using the following algorithm:
如果 value 为数字，则使用 interpolateNumber。
¥If value is a number, use interpolateNumber.
如果 value 为 color 或可强制转换为颜色的字符串，则使用 interpolateRgb。
¥If value is a color or a string coercible to a color, use interpolateRgb.
¥Use interpolateString.
要应用不同的插值器，请使用 transition.styleTween。
¥To apply a different interpolator, use transition.styleTween.
transition.styleTween(name, factory, priority) {#transition_styleTween}
源代码 · 如果指定了 factory 且不为空，则将指定名称样式的 tween 赋值给指定的插值器工厂。插值器工厂是一个返回 interpolator 的函数；过渡开始时，会按顺序为每个选定元素评估工厂函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将当前组作为当前 DOM 元素。返回的插值器将按顺序为过渡的每一帧调用，并传递 eased 时间 t，通常在 [0, 1] 范围内。最后，插值器的返回值将用于设置具有指定优先级的样式值。插值器必须返回一个字符串。（要在过渡开始时移除样式，请使用 transition.style；要在过渡结束时移除样式，请使用 transition.on 监听 end 事件。）
¥Source · If factory is specified and not null, assigns the style tween for the style with the specified name to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is 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 returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the style value with the specified priority. The interpolator must return a string. (To remove an style at the start of a transition, use transition.style; to remove an style at the end of a transition, use transition.on to listen for the end event.)
如果指定的工厂为 null，则删除先前分配的指定名称的样式补间（如果有）。如果未指定工厂，则返回具有指定名称的样式的当前插值器工厂，如果不存在这样的补间，则返回 undefined。
¥If the specified factory is null, removes the previously-assigned style tween of the specified name, if any. If factory is not specified, returns the current interpolator factory for style with the specified name, or undefined if no such tween exists.
例如，将填充样式从红色插入到蓝色：
¥For example, to interpolate the fill style from red to blue:
transition.styleTween("fill", () => d3.interpolateRgb("red", "blue"));或者像 transition.style 一样，从当前填充色插值到蓝色：
¥Or to interpolate from the current fill to blue, like transition.style:
transition.styleTween("fill", function() {
return d3.interpolateRgb(this.style.fill, "blue");
});或者应用自定义彩虹插值器：
¥Or to apply a custom rainbow interpolator:
transition.styleTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);此方法可用于指定自定义插值器，例如数据插值，其中 interpolateObject 用于插值两个数据值，然后使用结果值计算新的样式值。
¥This method is useful to specify a custom interpolator, such as with data interpolation, where interpolateObject is used to interpolate two data values, and the resulting value is then used to compute the new style value.
transition.text(value) {#transition_text}
源代码 · 对于每个选定元素，在过渡开始时将 文本内容 设置为指定的目标值。值可以指定为常量或函数。如果是函数，则会立即按顺序为每个选定元素评估该函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将 this 作为当前 DOM 元素。该函数的返回值随后会用于设置每个元素的文本内容。空值将清除内容。
¥Source · For each selected element, sets the text content to the specified target value when the transition starts. 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 text content. A null value will clear the content.
要插入文本而不是在开始时设置文本，请使用 transition.textTween 或附加替换元素并交叉淡入淡出不透明度。默认情况下不进行文本插值，因为这通常是不受欢迎的。
¥To interpolate text rather than to set it on start, use transition.textTween or append a replacement element and cross-fade opacity. Text is not interpolated by default because it is usually undesirable.
transition.textTween(factory) {#transition_textTween}
如果指定了 factory 且不为 null，则将文本 tween 赋值给指定的插值器工厂。插值器工厂是一个返回 interpolator 的函数；过渡开始时，会按顺序为每个选定元素评估工厂函数，传递当前数据 d 和索引 i，并将 this 上下文作为当前 DOM 元素。返回的插值器将按顺序为过渡的每一帧调用，并传递 eased 时间 t，通常在 [0, 1] 范围内。最后，插值器的返回值将用于设置文本。插值器必须返回一个字符串。
¥If factory is specified and not null, assigns the text tween to the specified interpolator factory. An interpolator factory is a function that returns an interpolator; when the transition starts, the factory is evaluated for each selected element, in order, being passed the current datum d and index i, with the this context as the current DOM element. The returned interpolator will then be invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. Lastly, the return value of the interpolator will be used to set the text. The interpolator must return a string.
例如，将文本插入到 0 到 100 之间的整数：
¥For example, to interpolate the text with integers from 0 to 100:
transition.textTween(() => d3.interpolateRound(0, 100));如果指定的工厂为 null，则删除先前分配的文本补间（如果有）。如果未指定 factory，则返回文本的当前插值器工厂；如果不存在这样的补间动画，则返回 undefined。
¥If the specified factory is null, removes the previously-assigned text tween, if any. If factory is not specified, returns the current interpolator factory for text, or undefined if no such tween exists.
transition.remove() {#transition_remove}
源代码 · 对于每个选定元素，在过渡结束时 removes 该元素，只要该元素没有其他活动或待处理的过渡。如果元素还有其他活动或待处理的过渡，则不执行任何操作。
¥Source · For each selected element, removes the element when the transition ends, as long as the element has no other active or pending transitions. If the element has other active or pending transitions, does nothing.
transition.tween(name, value) {#transition_tween}
源代码 · 对于每个选定元素，将指定名称的补间动画分配给指定的值函数。值必须指定为返回函数的函数。过渡开始时，将按顺序为每个选定元素评估值函数，传递当前数据 (d)、当前索引 (i) 和当前组（节点），并将其作为当前 DOM 元素。然后，按顺序为过渡的每一帧调用返回的函数，并传递 eased 时间 t，通常在 [0, 1] 范围内。如果指定的值为 null，则删除先前分配的指定名称的补间（如果有）。
¥Source · For each selected element, assigns the tween with the specified name with the specified value function. The value must be specified as a function that returns a function. When the transition starts, the value function is 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 returned function is then invoked for each frame of the transition, in order, being passed the eased time t, typically in the range [0, 1]. If the specified value is null, removes the previously-assigned tween of the specified name, if any.
例如，将填充属性插入到蓝色，例如 transition.attr：
¥For example, to interpolate the fill attribute to blue, like transition.attr:
transition.tween("attr.fill", function() {
const i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
return function(t) {
this.setAttribute("fill", i(t));
};
});