在过渡结束时调用回调

Question

我需要使用D3.js制作FadeOut方法（类似于jQuery）。我需要做的是使用将不透明度设置为0
transition()。

d3.select("#myid").transition().style("opacity", "0");

问题是我需要一个回调来实现转换完成的时间。如何实现回调？

Answer 1

您要监听过渡的“结束”事件。

// d3 v5
d3.select("#myid").transition().style("opacity","0").on("end", myCallback);

// old way
d3.select("#myid").transition().style("opacity","0").each("end", myCallback);

从文档中transition.each([type],listener)：

如果指定了 type ，则为过渡事件添加一个侦听器，同时支持“开始”和“结束”事件。即使过渡具有恒定的延迟和持续时间，也会为过渡中的每个单独元素调用侦听器。当每个元素开始转换时，开始事件可用于触发瞬时更改。通过选择当前元素this，并派生新的过渡，可以将结束事件用于启动多阶段过渡。在结束事件期间创建的任何过渡都将继承当前的过渡ID，因此不会覆盖以前计划的较新过渡。

最后，请注意，如果您只想在元素淡出后（过渡完成后）将其删除，则可以使用transition.remove()。