D3.js：停止转换中断鼠标悬停？ [英] D3.js: Stop transitions interrupting on mouseover?

问题描述

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

I'm working with D3's enter/exit selections, and I want to add a transition on mouseover events too.

问题是，如果我在鼠标移动字母时移动它们，它们会冻结，因为位置转换被中断。

The problem is that if I mouseover the letters as they are moving, they freeze, because the position transition is interrupted.

这是一个JSFiddle演示问题： http：/ /jsfiddle.net/uEuE4/1/ ，这是我用来将mouseover事件添加到更新并输入选择的代码：

Here is a JSFiddle demonstrating the problem: http://jsfiddle.net/uEuE4/1/ and this is the code I'm using to add mouseover events to the update and enter selections:

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

如何只在所有其他转换完成后才添加mouseover事件处理程序，以停止信件冻结？

How can I only add the mouseover event handlers once all other transitions are completed, in order to stop the letters freezing?

使代码更干燥的任何提示也将是非常受欢迎的。

Any tips for making the code more DRY would be very welcome too.

推荐答案

您可以为转换分配名称，此转换只会被具有相同名称的新转换中断。 p>

You can allocate a name to transition, then this transition will only be interrupted by new transition with the same name.

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

这篇关于D3.js：停止转换中断鼠标悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！