D3鼠标悬停转换"卡住"

Question

假设我想为导航菜单创建常规悬停效果,但我使用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"); });

Answer 1

我认为发生的情况是，当您.transition仅打开 时mouseover，当您在 1000 毫秒到期之前离开时，转换仍然没有完成。因此，当您提前离开时，鼠标悬停过渡仍在运行，并且没有对 mouseout 事件进行过渡调用来覆盖此过渡。（显然，即使该mouseout事件也不会停止.transition与该事件关联的mouseover事件。）

但是，正如您所指出的，当您确实放置了transitionmouseout 事件时，问题就会消失。我相信这是因为 mouseouttransition 优先于mouseover .transition，因此事件.transition上的amouseout可以使mouseout事件重新获得控制。

如果您注释掉该.transition事件，您可以在此处看到它的实际效果mouseout。

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

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