Javascript D3鼠标悬停转换得到；"；

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

---

我认为现在的情况是，当您仅在

鼠标上方使用
.transition
时，
当您在1000毫秒之前离开时，转换仍然没有运行。
所以当你提前离开时，鼠标悬停转换仍在运行，
在mouseout事件上没有转换调用来覆盖此转换。（显然，即使是
mouseout
事件也不会停止与
mouseover
事件关联的
.transition
。）

但是，正如您所指出的，当您在mouseout事件上放置
转换时，
问题消失了。我相信这是因为mouseout
transition
优先于
mouseover
.transition
，因此在
mouseout
事件上使用
.transition
将使
mouseout
事件恢复控制

如果在
mouseout
事件中注释掉
.transition
，您可以在此处看到它的作用


同样值得一读的是即将出版的d3书的第10章：
我不知道完美的答案，但我怀疑mouseout是在mouseover的持续时间（1s）完成之前被调用和完成的。也许为mouseout设定1100个持续时间？同时，在的读数表明d3版本2和3之间存在差异。您使用的是哪个版本？也没有一个完美的答案，但是：如果像在您的示例中一样，您使用的是HTML（而不是SVG），那么您可以完全跳过d3转换，改用css转换。这肯定会解决你的问题，而且会更有效。旧浏览器的用户不会得到一个转换，但是哦，威尔斯…嗯，我没有为鼠标输出使用任何转换，但是出于某种原因（我希望得到一个解释），使用鼠标输出的转换也解决了这个问题。我正在使用版本3，现在我将两个转换的持续时间都设置为500毫秒。我来到这个页面搜索同一个问题，但情况正好相反——当响应鼠标事件触发转换时，如果指针保持静止，它会中断转换。我通过将
指针事件：none
样式添加到包含
svg
的元素中找到了解决方案。更多细节：谢谢你的解释！在mouseout上添加transition并不能解决本例中的问题，好的，通过删除dynamicColor方法解决了这个问题