D3.js: Stop transitions interrupting on mouseover?

d3.js

Solution

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

Problem

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. 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'); }); ``` 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.

Original source