Block d3 .transition() until another transition has completed

Question

I have a hover effect implemented in d3 that selects several rectangles in an svg and changes their color:

var rect = d3.selectAll('.rect')

rect.transition()
  .duration(1000)
  .style('fill', red')

I only want this effect to be operating on one rectangle at a time. If I quickly hover over several rectangle is close succession, the effect is triggered on all the rectangles I've hovered over. How can I block other mouse hover events if there is currently another event being triggered?

Answer 1

You can have a global variable that acts as a semaphore:

var transitioning = false;

rect.append("...")
    .on("mouseover", hover);

function hover() {
  if(!transitioning) {
    transitioning = true;
    rect.transition()
        .duration(1000)
        .style('fill', 'red')
        .each("end", function() { transitioning = false; });
  }
}

Note that this assumes that all your transitions have the same duration and delay.