D3鼠标悬停转换得到“0”;“卡住”;

D3 mouseover transitions gets "stuck"

本文关键字：卡住 鼠标 悬停 转换 D3      更新时间：2023-09-26

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

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

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

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

但是，正如您所指出的，当您在mouseout事件上放置transition时，问题消失了。我相信这是因为鼠标输出transition优先于mouseover .transition，因此在mouseout事件上具有.transition将使mouseout事件重新处于控制之下。

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

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

同样值得一读的是斯科特·默里即将出版的d3书中的第10章：http://ofps.oreilly.com/titles/9781449339739/_interactivity.html

相关文章：