Transitions API
D3 Transitions为每个元素选择元素; 它将转换应用于元素当前定义的一部分。
配置API (Configuring 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([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() - 此方法用于返回所选元素的新转换。 它计划在转换停止时开始。 新转换继承了此转换的名称,持续时间和缓动。
Example - 让我们考虑以下示例。
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]) - 此方法用于将转换持续时间设置为指定值。 如果未指定值,则返回转换中第一个(非null)元素的持续时间的当前值。
transition.ease([value]) - 此方法用于简化所选元素的转换值。 为动画的每个帧调用缓动函数,并在[0,1]范围内传递标准化时间't'。 如果未指定值,则返回转换中第一个(非null)元素的当前缓动函数。
在下一章中,我们将讨论d3.js中的拖放概念。