1

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?

nick_v1
  • 1,654
  • 1
  • 18
  • 29
  • Maybe following can help you: http://stackoverflow.com/questions/7286532/jquery-mouseenter-vs-mouseover . While MouseEnter doesn't bubble, MouseOver does. So if you have an Element with `hover`-Event within an Element with `hover`-Event, the second one will trigger too, but with MouseEnter only the first one will trigger and the one inside this Element won't trigger anymore. JSFiddle: http://jsfiddle.net/ZCWvJ/7/ Was this what you are seaking for or should I read your question again? – Cagatay Ulubay Jun 08 '15 at 14:04

1 Answers1

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)

Lau
  • 282
  • 3
  • 11
  • Why does it need to bubble? The elements are not nested, plus the original D3 example does not use mouseenter. Can you explain this? – nick_v1 Jun 08 '15 at 14:13
  • See here if it helps http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing – Lau Jun 08 '15 at 14:17
  • What I am saying is that bubbling or capturing is irrelevant here because the elements are on the same level and are not nested. – nick_v1 Jun 08 '15 at 14:24