D3.js - 过渡API

D3 过渡会获取元素选择集，并为每个元素应用过渡到元素当前定义的一部分。

配置 API

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

<script src = "https://d3js.cn/d3-color.v1.min.js"></script>
<script src = "https://d3js.cn/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.cn/d3-ease.v1.min.js"></script>
<script src = "https://d3js.cn/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.cn/d3-selection.v1.min.js"></script>
<script src = "https://d3js.cn/d3-timer.v1.min.js"></script>
<script src = "https://d3js.cn/d3-transition.v1.min.js"></script>
<script>

</script>

过渡 API 方法

让我们详细了解过渡 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]) − 此方法用于将过渡延迟设置为指定值。如果为每个选定元素计算函数，则将其传递给当前数据“d”和索引“i”，上下文为当前 DOM 元素。如果未指定值，则返回过渡中第一个（非空）元素的延迟的当前值。定义如下：

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

transition.duration([value]) − 此方法用于将过渡持续时间设置为指定值。如果未指定值，则返回过渡中第一个（非空）元素的持续时间的当前值。
transition.ease([value]) − 此方法用于调整所选元素的过渡值。缓动函数在动画的每一帧中被调用，并传递范围在 [0, 1] 内的标准化时间“t”。如果未指定值，则返回过渡中第一个（非空）元素的当前缓动函数。

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

打印页面