D3动画问题答案

【问题标题】：D3 animation issueD3动画问题
【发布时间】：2013-06-07 14:23:58
【问题描述】：

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

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

【问题讨论】：

这不是一个好的解决方案，但是您是否尝试过从按钮中删除监听器？然后用animationDuration之后触发的定时器事件再次设置。
应该够用了。

标签： javascript jquery html web-applications d3.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：