D3.js - Transitions API

D3 Transitions选择元素和每个元素;它将转换应用于元素当前定义的一部分.

配置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(过滤器) : 此方法用于选择与指定过滤器匹配的元素，它们定义如下.

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

• transition.merge(其他) : 此方法用于将转换与其他转换合并.它定义如下.

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] ) : 此方法用于将转换延迟设置为指定值.如果为每个选定元素计算函数，则将其传递给当前数据"d"并索引"i"，并将上下文作为当前DOM元素.如果未指定值，则返回转换中第一个(非null)元素的延迟的当前值.它定义如下，

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

• transition.duration([value]) : 此方法用于将转换持续时间设置为指定值.如果未指定值，则返回转换中第一个(非空)元素的持续时间的当前值.

• 转换.轻松([值]) : 此方法用于简化所选元素的转换值.为动画的每个帧调用缓动函数，并在[0,1]范围内传递标准化时间't'.如果未指定值，则返回转换中第一个(非空)元素的当前缓动函数.

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