title: D3.js: Stop transitions interrupting on mouseover?
body: <p>I'm working with D3's enter/exit selections, and I want to add a transition on mouseover events too. </p>
  
  <p>The problem is that if I mouseover the letters as they are moving, they freeze, because the position transition is interrupted. </p>
  
  <p>Here is a JSFiddle demonstrating the problem: <a href="http://jsfiddle.net/uEuE4/1/" rel="noreferrer">http://jsfiddle.net/uEuE4/1/</a> and this is the code I'm using to add mouseover events to the update and enter selections: </p>
  
  <pre><code>text
  .on('mouseover', function(d) { 
    d3.select(this).transition().duration(100).style('fill', 'yellow');
  });
  </code></pre>
  
  <p>How can I only add the mouseover event handlers once all other transitions are completed, in order to stop the letters freezing?</p>
  
  <p>Any tips for making the code more DRY would be very welcome too. </p>