阻止d3 .transition（）直到另一个转换完成

Question

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

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

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

我只想让这个效果一次在一个矩形上运行。如果我快速悬停在几个矩形上是紧密连续的，则会在我悬停的所有矩形上触发效果。如果当前有其他事件被触发，我如何阻止其他鼠标悬停事件？

Answer 1

您可以拥有一个充当信号量的全局变量：

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

请注意，这假设您的所有过渡都具有相同的持续时间和延迟。