我正在使用D3的输入/退出选择,我也想在鼠标悬停事件上添加一个过渡。

问题在于,如果我将鼠标悬停在它们移动时将其停滞,因为位置转换会中断。

这是一个演示问题的JSFiddle:http://jsfiddle.net/uEuE4/1/,这是我用来将鼠标悬停事件添加到更新并输入选择内容的代码:

text
.on('mouseover', function(d) {
  d3.select(this).transition().duration(100).style('fill', 'yellow');
});

我如何仅在完成所有其他转换后才添加mouseover事件处理程序,以停止卡住字母?

任何使代码更干燥的技巧也将非常受欢迎。

最佳答案

您可以为过渡指定一个名称,然后该过渡将仅被具有相同名称的新过渡中断。

text
.on('mouseover', function(d) {
  d3.select(this).transition("fillColor").duration(100).style('fill', 'yellow');
});

关于D3.js:停止转换会在鼠标悬停时中断吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/19381375/

10-13 00:32