D3

选择元素 ​

🌐 Selecting elements

过渡是通过 selections 的 selection.transition 得到的。你也可以使用 d3.transition 在文档根元素上创建过渡。

🌐 Transitions are derived from selections via selection.transition. You can also create a transition on the document root element using d3.transition.

selection.transition(name) ​

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

如果 name 是一个 transition 实例，则返回的 transition 具有与指定 transition 相同的 id 和 name。如果所选元素上已经存在具有相同 id 的 transition，则返回该元素的现有 transition。否则，返回的 transition 的时序将继承自每个所选元素最近祖级上具有相同 id 的现有 transition。因此，该方法可用于在多个选择之间同步 transition，或重新选择特定元素的 transition 并修改其配置。例如：

🌐 If the name is a transition instance, the returned transition has the same id and name as the specified transition. If a transition with the same id already exists on a selected element, the existing transition is returned for that element. Otherwise, the timing of the returned transition is inherited from the existing transition of the same id on the nearest ancestor of each selected element. Thus, this method can be used to synchronize a transition across multiple selections, or to re-select a transition for specific elements and modify its configuration. For example:

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");

如果在所选节点或其祖级上找不到指定的过渡（例如如果过渡已经结束(already ended)），将使用默认的时间参数；然而，在未来的版本中，这可能会更改为抛出错误。参见#59。

🌐 If the specified transition is not found on a selected node or its ancestors (such as if the transition already ended), the default timing parameters are used; however, in a future release, this will likely be changed to throw an error. See #59.

transition(name) ​

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

js
d3.selection()
  .transition(name)

此功能还可以用于测试过渡（instanceof d3.transition）或扩展过渡原型。

🌐 This function can also be used to test for transitions (instanceof d3.transition) or to extend the transition prototype.

transition.select(selector) ​

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

该方法相当于通过 transition.selection 推导此转换的选择，通过 selection.select 创建子选择，然后通过 selection.transition 创建新的转换：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, creating a subselection via selection.select, and then creating a new transition via selection.transition:

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

transition.selectAll(选择器) ​

🌐 transition.selectAll(selector)

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

此方法等同于通过 transition.selection 推导此过渡的选择，使用 selection.selectAll 创建一个子选择，然后通过 selection.transition 创建一个新的过渡：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, creating a subselection via selection.selectAll, and then creating a new transition via selection.transition:

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

transition.selectChild(selector) ​

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

这种方法等同于通过 transition.selection 推导此转换的选择，使用 selection.selectChild 创建子选择，然后通过 selection.transition 创建一个新的转换：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, creating a subselection via selection.selectChild, and then creating a new transition via 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 创建一个新的转换：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, creating a subselection via selection.selectChildren, and then creating a new transition via selection.transition:

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

transition.filter(filter) ​

来源 · 对于每个选中的元素，仅选择与指定过滤器匹配的元素，并返回结果选择的过渡。过滤器可以指定为选择器字符串或函数。如果是函数，它会按顺序对每个选中的元素进行求值，传入当前数据（d）、当前索引（i）和当前组（nodes），并且this指向当前的 DOM 元素。新的过渡具有与此过渡相同的 ID、名称和时间；但是，如果在选中的元素上已经存在相同 ID 的过渡，则返回该元素上现有的过渡。

该方法相当于通过 transition.selection 推导此转换的选择，使用 selection.filter 创建子选择，然后通过 selection.transition 创建新的转换：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, creating a subselection via selection.filter, and then creating a new transition via 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 创建一个新的转换：

🌐 This method is equivalent to deriving the selection for this transition via transition.selection, merging with the selection likewise derived from the other transition via selection.merge, and then creating a new transition via 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();

每个过渡的延迟时间相对于其前一个过渡。因此，在上述示例中，苹果在最后一次变为棕色的过渡开始之前，会保持红色一秒钟。

🌐 The delay for each transition is relative to its previous transition. Thus, in the above example, apples will stay red for one second before the last transition to brown starts.

transition.selection() ​

来源 · 返回与此转换对应的选择。

active(node, 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);
      });