作者Observable

外观

选择元素 ​

过渡是从 选择 通过 selection.transition 派生的。您也可以使用 d3.transition 在文档根元素上创建过渡。

selection.transition(name) ​

来源 · 返回给定 selection 上具有指定 name 的新过渡。如果未指定 name，则使用 null。新过渡仅与具有相同名称的其他过渡互斥。

如果 name 是 transition 实例，则返回的过渡与指定的过渡具有相同的 id 和名称。如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。否则，返回过渡的计时将从每个选择元素的最近祖先上具有相同 id 的现有过渡继承。因此，此方法可用于跨多个选择同步过渡，或重新选择特定元素的过渡并修改其配置。例如

js
const t = d3.transition()
    .duration(750)
    .ease(d3.easeLinear);

d3.selectAll(".apple").transition(t)
    .style("fill", "red");

d3.selectAll(".orange").transition(t)
    .style("fill", "orange");

如果未在选择节点或其祖先上找到指定的 transition（例如，如果过渡 已经结束），则使用默认计时参数；但是，在未来的版本中，这可能会更改为抛出错误。请参阅 #59。

transition(name) ​

来源 · 返回根元素 document.documentElement 上具有指定 name 的新过渡。如果未指定 name，则使用 null。新过渡仅与具有相同名称的其他过渡互斥。name 也可以是 transition 实例；请参阅 selection.transition。此方法等效于

js
d3.selection()
  .transition(name)

此函数还可用于测试过渡 (instanceof d3.transition) 或扩展过渡原型。

transition.select(selector) ​

来源 · 对于每个选定元素，选择第一个与指定 selector 字符串匹配的后代元素（如果有），并返回对结果选择的过渡。selector 可以指定为选择器字符串或函数。如果为函数，则会按顺序为每个选定元素评估它，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素。新过渡与当前过渡具有相同的 id、名称和计时；但是，如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。

此方法等效于通过 transition.selection 派生当前过渡的选择，通过 selection.select 创建子选择，然后通过 selection.transition 创建新过渡

js
transition
  .selection()
  .select(selector)
  .transition(transition)

transition.selectAll(selector) ​

来源 · 对于每个选定元素，选择所有与指定 selector 字符串匹配的后代元素（如果有），并返回对结果选择的过渡。selector 可以指定为选择器字符串或函数。如果为函数，则会按顺序为每个选定元素评估它，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素。新过渡与当前过渡具有相同的 id、名称和计时；但是，如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。

此方法等效于通过 transition.selection 派生当前过渡的选择，通过 selection.selectAll 创建子选择，然后通过 selection.transition 创建新过渡

js
transition
  .selection()
  .selectAll(selector)
  .transition(transition)

transition.selectChild(selector) ​

来源 · 对于每个选定元素，选择第一个与指定 selector 字符串匹配的子元素（如果有），并返回对结果选择的过渡。selector 可以指定为选择器字符串或函数。如果为函数，则会按顺序为每个选定元素评估它，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素。新过渡与当前过渡具有相同的 id、名称和计时；但是，如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。

此方法等效于通过 transition.selection 派生当前过渡的选择，通过 selection.selectChild 创建子选择，然后通过 selection.transition 创建新过渡

js
transition
  .selection()
  .selectChild(selector)
  .transition(transition)

transition.selectChildren(selector) ​

来源 · 对于每个选定元素，选择所有与指定 selector 字符串匹配的子元素（如果有），并返回对结果选择的过渡。selector 可以指定为选择器字符串或函数。如果为函数，则会按顺序为每个选定元素评估它，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素。新过渡与当前过渡具有相同的 id、名称和计时；但是，如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。

此方法等效于通过 transition.selection 派生当前过渡的选择，通过 selection.selectChildren 创建子选择，然后通过 selection.transition 创建新过渡

js
transition
  .selection()
  .selectChildren(selector)
  .transition(transition)

transition.filter(filter) ​

来源 · 对于每个选定元素，仅选择与指定 filter 匹配的元素，并返回对结果选择的过渡。filter 可以指定为选择器字符串或函数。如果为函数，则会按顺序为每个选定元素评估它，并传递当前数据 (d)、当前索引 (i) 和当前组 (nodes)，其中 this 为当前 DOM 元素。新过渡与当前过渡具有相同的 id、名称和计时；但是，如果选择元素上已经存在具有相同 id 的过渡，则为该元素返回现有过渡。

此方法等效于通过 transition.selection 派生当前过渡的选择，通过 selection.filter 创建子选择，然后通过 selection.transition 创建新过渡

js
transition
  .selection()
  .filter(filter)
  .transition(transition)

transition.merge(other) ​

来源 · 返回一个新过渡，将当前过渡与指定的 other 过渡合并，other 过渡必须与当前过渡具有相同的 id。返回的过渡与当前过渡具有相同的组数、相同的父级、相同的名称和相同的 id。当前过渡中任何缺失（null）的元素将用 other 过渡中对应的元素（如果存在（不为 null））填充。

此方法等同于通过 transition.selection 获取此过渡的选取，并通过 selection.merge 与从 other 过渡中类似获取的选取合并，然后通过 selection.transition 创建一个新的过渡。

js
transition
  .selection()
  .merge(other.selection())
  .transition(transition)

transition.transition() ​

源代码 · 返回一个新的过渡，该过渡作用于与当前过渡相同的选定元素，并计划在当前过渡结束后开始。新的过渡继承了等于当前过渡时间加上其 延迟 和 持续时间 的参考时间。新的过渡还继承了当前过渡的名称、持续时间和 缓动。此方法可用于安排一系列链接的过渡。例如

js
d3.selectAll(".apple")
  .transition() // First fade to green.
    .style("fill", "green")
  .transition() // Then red.
    .style("fill", "red")
  .transition() // Wait one second. Then brown, and remove.
    .delay(1000)
    .style("fill", "brown")
    .remove();

每个过渡的延迟是相对于其先前过渡而言的。因此，在上面的示例中，苹果将在最后一次过渡到棕色开始之前保持红色一秒钟。

transition.selection() ​

源代码 · 返回与当前过渡相对应的 选取。

active(node, name) ​

示例 · 源代码 · 返回指定 node 上具有指定 name 的活动过渡（如果有）。如果未指定 name，则使用 null。如果指定节点上不存在此类活动过渡，则返回 null。此方法对于创建链接的过渡很有用。例如，要启动迪斯科模式

js
d3.selectAll("circle").transition()
    .delay((d, i) => i * 50)
    .on("start", function repeat() {
        d3.active(this)
            .style("fill", "red")
          .transition()
            .style("fill", "green")
          .transition()
            .style("fill", "blue")
          .transition()
            .on("start", repeat);
      });