Javascript 块d3.transition（），直到另一个转换完成

我在d3中实现了一个悬停效果，它在svg中选择几个矩形并更改它们的颜色：

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

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

---

我只希望这个效果一次作用于一个矩形。如果我快速悬停在几个矩形上，效果会在我悬停过的所有矩形上触发。如果当前正在触发另一个事件，如何阻止其他鼠标悬停事件？

您可以使用一个全局变量作为信号量：

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; });
  }
}

注意，这假设所有的转换都具有相同的持续时间和延迟