作者：Observable

外观

修改元素 ​

在选择元素并使用 selection.transition 创建过渡之后，可以使用过渡的转换方法来影响文档内容。

transition.attr(name, value) ​

源代码 · 为每个选定元素，将具有指定name 属性的属性补间 设置为指定的value 目标值。补间的起始值为过渡开始时的属性值。目标value 可以指定为常量或函数。如果为函数，则立即按顺序对每个选定元素进行求值，并传递当前数据项 (d)、当前索引 (i) 和当前组 (nodes)，其中this 为当前 DOM 元素。

如果目标值为 null，则在过渡开始时删除属性。否则，将根据目标值的类型选择一个插值器，使用以下算法

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

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

transition.attrTween(name, factory) ​

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

如果指定的factory 为 null，则删除之前分配的指定name 属性的属性补间（如果有）。如果未指定factory，则返回具有指定name 属性的当前插值器工厂，如果不存在此类补间，则返回 undefined。

例如，要将填充属性从红色插值到蓝色

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

或者将当前填充插值到蓝色，类似于 transition.attr

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

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

js
transition.attrTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

此方法可用于指定自定义插值器，例如理解 SVG 路径 的插值器。一个有用的技术是数据插值，其中 interpolateObject 用于插值两个数据值，然后使用结果值（例如，使用 形状）来计算新的属性值。

transition.style(name, value, priority) ​

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

如果目标值为 null，则在过渡开始时删除样式。否则，将根据目标值的类型选择一个插值器，使用以下算法

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

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

transition.styleTween(name, factory, priority) ​

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

如果指定的factory 为 null，则删除之前分配的指定name 样式的样式补间（如果有）。如果未指定factory，则返回具有指定name 样式的当前插值器工厂，如果不存在此类补间，则返回 undefined。

例如，要将填充样式从红色插值到蓝色

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

或者将当前填充插值到蓝色，类似于 transition.style

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

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

js
transition.styleTween("fill", () => (t) => `hsl(${t * 360},100%,50%)`);

此方法可用于指定自定义插值器，例如数据插值，其中 interpolateObject 用于插值两个数据值，然后使用结果值来计算新的样式值。

transition.text(value) ​

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

要对文本进行插值而不是在开始时设置它，请使用 transition.textTween 或附加一个替换元素并交叉淡化不透明度。默认情况下不会对文本进行插值，因为这通常是不可取的。

transition.textTween(factory) ​

源代码，示例

如果指定了factory且不为空，则将文本tween分配给指定的插值器factory。插值器工厂是一个返回插值器的函数；当过渡开始时，factory会针对每个选定的元素按顺序进行评估，并传入当前数据d和索引i，并将this上下文作为当前 DOM 元素。然后，返回的插值器将在过渡的每一帧中按顺序调用，并传入缓动时间t（通常在 [0, 1] 范围内）。最后，插值器的返回值将用于设置文本。插值器必须返回一个字符串。

例如，要使用从 0 到 100 的整数对文本进行插值

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

如果指定的factory为空，则移除之前分配的文本 tween（如果有）。如果未指定factory，则返回文本的当前插值器工厂，如果不存在 such tween，则返回 undefined。

transition.remove() ​

源代码 · 对于每个选定的元素，当过渡结束时，移除元素，只要该元素没有其他活动或待处理的过渡。如果元素有其他活动或待处理的过渡，则什么也不做。

transition.tween(name, value) ​

源代码 · 对于每个选定的元素，使用指定的name和指定的value函数分配 tween。value必须指定为返回一个函数的函数。当过渡开始时，value函数会针对每个选定的元素按顺序进行评估，并传入当前数据（d）、当前索引（i）和当前组（nodes），并将this作为当前 DOM 元素。然后，返回的函数会在过渡的每一帧中按顺序调用，并传入缓动时间t（通常在 [0, 1] 范围内）。如果指定的value为空，则移除之前分配的指定name的 tween（如果有）。

例如，要将填充属性插值到蓝色，例如transition.attr

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