D3 Mouseenter vs Mouseover

Question

I wrote a D3 widget a while back based on the sunburst example on the D3 site - http://bl.ocks.org/kerryrodden/7090426.

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.

Here is the broken version: http://jsfiddle.net/wrdrvr/f5tvsv5v/

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 > 0) {
        return color(d.name); 
      }
  }) .each(stash)
  .on("mouseover", mouseover)
//.on("mouseenter",mouseover)
  .on("mouseleave", mouseleave)

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?

Answer 1

Updated http://jsfiddle.net/f5tvsv5v/2/

  .on("mouseleave", mouseleave)
  //.on("mouseover", mouseover)
.on("mouseenter",mouseover)

You should use mouseenter instead of mouseover since mouseover does not buble (http://www.quirksmode.org/dom/events/mouseover.html)