D3过渡选择元素并为每个元素选择；它将过渡应用于元素的当前定义的一部分。

配置API

您可以使用以下脚本配置过渡API。

过渡API方法

让我们详细介绍一下Transition API方法。

选择元素

让我们详细讨论各种选择元素。

• selection.transition（[name]） -此方法用于返回带有名称的新选择过渡。如果未指定名称，则返回null。

• selection.interrupt（[name]） -此方法用于通过名称中断转换的所选元素，定义如下。

selection.interrupt().selectAll("*").interrupt();

• d3.interrupt（node [，name]） -此方法用于中断指定节点上指定名称的转换。

• d3.transition（[name]） -此方法用于返回具有指定名称的新过渡。

• transition.select（selector） -此方法用于选择与指定选择器匹配的第一个元素，并在结果选择上返回转换，定义如下。

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

• transition.selectAll（selector） -此方法用于选择与指定选择器匹配的所有元素，并在结果选择上返回一个过渡。它定义如下-

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

• transition.filter（filter） -此方法用于选择与指定过滤器匹配的元素，它们在下面定义。

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

• transition.merge（other） -此方法用于将过渡与其他过渡合并。定义如下。

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

• transition.transition（） -此方法用于在所选元素上返回新的过渡。计划在过渡停止时开始。新过渡将继承此过渡的名称，持续时间和缓动性。

示例-让我们考虑以下示例。

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

在这里，身体会淡化为黄色，并在上一次过渡之前五秒钟开始。

• d3.active（node [，name]） -此方法用于返回具有名称的指定节点上的转换。

计时方法

让我们详细介绍过渡计时API方法。

• transition.delay（[value]） -此方法用于将转换延迟设置为指定值。如果为每个选定元素评估了一个函数，则将其作为当前DOM元素传递给当前数据’d’和索引’i’。如果未指定值，则返回过渡中第一个（非空）元素的延迟的当前值。定义如下

transition.delay(function(d, i) { return i * 10; });

• transition.duration（[value]） -此方法用于将过渡持续时间设置为指定值。如果未指定值，则返回过渡中第一个（非空）元素的持续时间的当前值。

• transition.ease（[value]） -此方法用于简化选定元素的过渡值。对动画的每个帧调用缓动函数，并在[0，1]范围内传递归一化时间’t’。如果未指定值，则它将返回过渡中第一个（非空）元素的当前缓动函数。

在下一章中，我们将讨论d3.js中的拖放概念。