D3

修改元素 ​

🌐 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) ​

来源 · 对每个选中的元素，为指定 name 的属性分配 属性补间 到指定的目标 value。补间的起始值是过渡开始时该属性的值。目标 value 可以指定为常量或函数。如果是函数，它会立即为每个选中元素依次求值，传入当前数据 (d)、当前索引 (i) 和当前组 (nodes)，并且 this 为当前 DOM 元素。

如果目标值为 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:

  1. 如果 value 是一个数字，使用 interpolateNumber。
  2. 如果 value 是一个 颜色 或者可以转换为颜色的字符串，请使用 interpolateRgb。
  3. 使用 interpolateString。

要应用不同的插值器，请使用 transition.attrTween。

🌐 To apply a different interpolator, use transition.attrTween.

transition.attrTween(name, factory) ​

来源 · 如果指定了 factory 且其不为 null，则为具有指定 name 的属性分配指定插值器 factory 的属性 tween。插值器工厂是一个返回 插值器 的函数；当过渡开始时，factory 会对每个选定元素按顺序进行求值，传入当前的数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前的 DOM 元素。随后返回的插值器将按顺序在过渡的每一帧被调用，传入缓动时间 eased 的 t，通常在 [0, 1] 范围内。最后，插值器的返回值将用于设置属性值。插值器必须返回一个字符串。（若要在过渡开始时删除属性，使用 transition.attr；若要在过渡结束时删除属性，使用 transition.on 监听 end 事件。）

如果指定的factory为null，则移除之前分配给指定name的属性补间（如果有的话）。如果未指定factory，则返回具有指定name的属性的当前插值器工厂，如果不存在这样的补间，则返回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:

js
transition.attrTween("fill", () => d3.interpolateRgb("red", "blue"));

或者从当前填充插值到蓝色，就像 transition.attr 一样：

🌐 Or to interpolate from the current fill to blue, like transition.attr:

js
transition.attrTween("fill", function() {
  return d3.interpolateRgb(this.getAttribute("fill"), "blue");
});

或者应用自定义彩虹插值器：

🌐 Or to apply a custom rainbow interpolator:

js
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) ​

来源 · 对每个选定的元素，将指定 name 的 样式补间 分配到指定的目标 value，并带有指定的 priority。当过渡开始时，补间的起始值为样式的内联值（如果存在），否则为其计算值。目标 value 可以指定为常量或函数。如果是函数，则会立即对每个选定元素进行求值，按顺序传入当前的数据 (d)、当前索引 (i) 和当前组 (nodes)，this 为当前的 DOM 元素。

如果目标值为 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:

  1. 如果 value 是一个数字，使用 interpolateNumber。
  2. 如果 value 是一个 颜色 或者可以转换为颜色的字符串，请使用 interpolateRgb。
  3. 使用 interpolateString。

要应用不同的插值器，请使用 transition.styleTween。

🌐 To apply a different interpolator, use transition.styleTween.

transition.styleTween(name, factory, priority) ​

来源 · 如果指定了 factory 且不为 null，则将具有指定 name 的样式 tween 分配给指定的插值器 factory。插值器工厂是一个返回 插值器 的函数；当过渡开始时，factory 将按顺序对每个选定元素进行求值，传入当前数据 (d), 当前索引 (i), 以及当前组 (nodes)，this 为当前 DOM 元素。返回的插值器随后将在过渡的每一帧被调用，按顺序传入 缓动 时间 t，通常在范围 [0, 1] 内。最后，插值器的返回值将用于以指定 priority 设置样式值。插值器必须返回一个字符串。（要在过渡开始时移除样式，请使用 transition.style；要在过渡结束时移除样式，请使用 transition.on 监听 end 事件。）

如果指定的factory为空，则移除指定name的先前分配的样式补间（如果有的话）。如果未指定factory，则返回指定name样式的当前插值器工厂，如果不存在这样的补间，则返回未定义。

🌐 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:

js
transition.styleTween("fill", () => d3.interpolateRgb("red", "blue"));

或者从当前填充插值到蓝色，就像 transition.style:

🌐 Or to interpolate from the current fill to blue, like transition.style:

js
transition.styleTween("fill", function() {
  return d3.interpolateRgb(this.style.fill, "blue");
});

或者应用自定义彩虹插值器：

🌐 Or to apply a custom rainbow interpolator:

js
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) ​

来源 · 对于每个选定的元素，在过渡开始时将其 文本内容 设置为指定的目标 值。该 值 可以指定为常量或函数。如果是函数，则会立即对每个选定的元素进行评估，按顺序传入当前数据 (d)、当前索引 (i) 和当前组 (nodes)，并且 this 指向当前的 DOM 元素。函数的返回值随后用于设置每个元素的文本内容。值为 null 将清除内容。

要插值文本而不是在开始时设置它，请使用 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) ​

来源，示例

如果指定了 factory 且不为 null，则将文本 tween 分配给指定的插值器 factory。插值器工厂是一个返回 interpolator 的函数；当过渡开始时，对每个选中的元素依次评估 factory，传入当前数据 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:

js
transition.textTween(() => d3.interpolateRound(0, 100));

如果指定的 factory 为 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.tween(name, value) ​

来源 · 对每个选定的元素，使用指定的 name 为其分配指定的 value 函数。value 必须指定为返回函数的函数。当过渡开始时，value 函数会依顺序对每个选定的元素进行评估，并传入当前数据 (d), 当前索引 (i) 和当前组 (nodes)，同时 this 为当前的 DOM 元素。然后返回的函数会在过渡的每一帧依顺序被调用，并传入 缓动 时间 t，通常范围为 [0, 1]。如果指定的 value 为 null，则移除先前分配的指定 name 的动画函数（如果有的话）。

例如，要将 fill 属性插值为蓝色，如 transition.attr:

🌐 For example, to interpolate the fill attribute to blue, like transition.attr:

js
transition.tween("attr.fill", function() {
  const i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
  return function(t) {
    this.setAttribute("fill", i(t));
  };
});