我需要使用D3.js制作FadeOut方法(类似于jQuery)。我需要做的是使用将不透明度设置为0 transition()。
transition()
d3.select("#myid").transition().style("opacity", "0");
问题是我需要一个回调来实现转换完成的时间。如何实现回调?
您要监听过渡的“结束”事件。
// 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):
transition.each([type],listener)
如果指定了 type ,则为过渡事件添加一个侦听器,同时支持“开始”和“结束”事件。即使过渡具有恒定的延迟和持续时间,也会为过渡中的每个单独元素调用侦听器。当每个元素开始转换时,开始事件可用于触发瞬时更改。通过选择当前元素this,并派生新的过渡,可以将结束事件用于启动多阶段过渡。在结束事件期间创建的任何过渡都将继承当前的过渡ID,因此不会覆盖以前计划的较新过渡。
this
最后,请注意,如果您只想在元素淡出后(过渡完成后)将其删除,则可以使用transition.remove()。
transition.remove()