D3 animation issue

Question

I have a button that when pressed begins a color change transition in D3 for 1.5 seconds. The issue is that if someone presses the button again while the transition is taking place, the animation starts from the beginning again. Is there any way to deal with this? Even if I have a variable indicating that an animation is taking place, the variable is changed to false even before the animation is completed. Even then, I wouldn't know where to place the variable

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

Answer 1

You can add a listener for the end event using the each function that will tell you when a transition has finished. In the handler for that you can either set your variable that tells you if a transition is taking place or, as suggested in the comment, reenable the listener. More in the documentation .

Answer 2

As mentioned, you might use .each() and end. Here a sample syntax:

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