javascript - D3动画问题

Question

我有一个按钮，当按下时，D3 中的颜色变化过渡开始 1.5 秒。问题是，如果有人在转换过程中再次按下按钮，动画就会从头开始。有什么办法可以解决这个问题吗？即使我有一个变量指示正在发生动画，即使在动画完成之前，该变量也会更改为 false。即使那样，我也不知道在哪里放置变量

if (animation !== "false") { ??????
d3.select("#" + element.id).transition().attr("fill", "#fffff").duration(animationDuration)
}

Answer 1

您可以使用在转换完成时告诉您end的函数为事件添加一个侦听器。each在处理程序中，您可以设置告诉您是否正在发生转换的变量，或者按照评论中的建议，重新启用侦听器。更多在文档中。

Answer 2

如前所述，您可以使用 .each() 和 end。这是一个示例语法：

    element.id.transition(1500)
        .attr('fill', '#ffffff')
        .each('end',function() {   
            // event handler will start after the end of previous 
            transition       
        });