D3.js - Transitions API

D3 Transitions 选择元素，并针对每个元素将转换应用于元素当前定义的一部分。

配置 API

您可以使用以下脚本配置转换 API。

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

</script>

Transition 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()
    
    // 淡入黄色。
    .style("fill", "yellow")
    .transition()
    
    // 等待五秒钟。然后变为蓝色，并移除。
    .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 中的拖放概念。