D3.js 转换(Transitions) API
D3 过渡选择元素和每个元素;它将过渡应用于元素的当前定义的一部分。
配置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>
转换 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]) - 此方法用于将过渡延迟设置为指定值。如果为每个选定元素评估函数,则将其传递给当前数据 'd' 和索引 'i',并将上下文作为当前 DOM 元素。如果未指定值,则返回转换中第一个(非空)元素的延迟的当前值。它定义如下,
transition.delay(function(d, i) { return i * 10; });
transition.duration([value]) - 此方法用于将过渡持续时间设置为指定值。如果未指定值,则返回过渡中第一个(非空)元素的持续时间的当前值。
transition.ease([value]) - 此方法用于缓和所选元素的过渡值。为动画的每一帧调用缓动函数,并在 [0, 1] 范围内传递归一化时间“t”。如果未指定值,则返回过渡中第一个(非空)元素的当前缓动函数。