title: d3 transition not working when triggered from mouseover/mouseout handler
body: <pre><code>d3.select('svg')
      .append('rect')
      .attr('width', 50)
      .attr('height', 50)
      .style('fill', '#BFDEFF')
      .on('mouseover', function () {
          d3.select(this).transition().style('fill', '2B24FF');
      })
      .on('mouseout', function () {
          d3.select(this).transition().style('fill', 'BFDEFF');
      });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/g63hw/1/" rel="nofollow">http://jsfiddle.net/g63hw/1/</a></p>
  
  <p>Transition seems to not be taken into account, the change happens instantly. What am I obviously missing here?</p>