title: D3 Mouseenter vs Mouseover
body: <p>I wrote a D3 widget a while back based on the sunburst example on the D3 site - <a href="http://bl.ocks.org/kerryrodden/7090426" rel="nofollow">http://bl.ocks.org/kerryrodden/7090426</a>. </p>
  
  <p>The widget was fine and I even submitted it to an open source project (several other people viewed it and tested it). However now, when I try to view the same widget with a different computer (same browser version), I am experiencing an inconsistent behavior with mouseover and mouseenter. When I hover over items, only the first item I hovered over has the opacity set, when I move the mouse within the widget, opacity is not updated. </p>
  
  <p>Here is the broken version:
  <a href="http://jsfiddle.net/wrdrvr/f5tvsv5v/" rel="nofollow">http://jsfiddle.net/wrdrvr/f5tvsv5v/</a></p>
  
  <pre><code>var path = svg.datum(data).selectAll("path")
    .data(partition.nodes)
  .enter().append("path")
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
    .attr("d", arc)
    .attr('id',function(d) {
      return d.name+"-"+d.value;
    })
    .style("stroke", "#fff")
    .style("fill", function(d) { 
        if (d.depth &gt; 0) {
          return color(d.name); 
        }
    }) .each(stash)
    .on("mouseover", mouseover)
  //.on("mouseenter",mouseover)
    .on("mouseleave", mouseleave)
  </code></pre>
  
  <p>I was able to get it to work as it was supposed to by including a mouseenter, however I did not use it previously and it was not used in the example and I am not sure why I need it here. Can someone please help clarify this? </p>