javascript - D3鼠标悬停过渡获取 "stuck"

假设我想为导航菜单创建常规的悬停效果，但是我使用CSS替代D3来“软化”效果，而不是CSS。使用mouseover和mouseout作为.on方法可以很好地工作。但是，问题是，如果在转换完成之前鼠标离开了悬停的链接，转换就会卡住。如何避免这种副作用？

例如，使用此代码，即使您将鼠标移到其他位置，如果过快，其底部边框仍将显示为橙色:

d3.selectAll("a")
    .on("mouseover", function() {
       d3.select(this)
      .style("border-bottom-color", "#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color", "#B23600"); })
    .on("mouseout", function() {
       d3.select(this)
      .style("border-bottom-color", "#fff"); });

最佳答案

我认为这是当您仅在.transition上包含mouseover时，
当您在1000毫秒到期之前离开时，过渡仍然没有按照自己的路线进行。
因此，当您提早离开时，鼠标悬停过渡仍在运行，
并且没有mouseout事件上的过渡调用来覆盖此过渡。 (显然，即使mouseout事件也不会停止与.transition事件相关联的mouseover。)

但是，正如您指出的那样，当您将transition放在mouseout事件上时，
问题消失了。我相信这是因为mouseout transition优先于mouseover .transition，因此在.transition事件上具有mouseout会使mouseout事件重新处于控制状态。

如果您在.transition事件中注释掉了mouseout，则可以在此处看到它的运行情况。

http://jsfiddle.net/Ldmv6/1/

同样值得一读的是即将出版的d3书Scott Murray's的第10章:http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

关于javascript - D3鼠标悬停过渡获取 "stuck"，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14944150/