javascript - D3 mouseover transitions gets "stuck" - Stack Overflow

admin管理员组

文章数量:1426839

Say I want to create regular hover effects for a navigation menu, but instead of CSS I use D3 transitions to "soften up" the effect. This works fine using mouseover and mouseout for the .on-method. The problem, though, is that the transition gets stuck if the mouse leaves the hovered link before the transition is done. How does one avoid that side effect?

For instance, with this code, the bottom border is still displayed in orange even after the mouse has moved elsewhere, if you do it too fast:

d3.selectAll("a")
    .on("mouseover", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color", "#B23600"); })
    .on("mouseout", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff"); });

Say I want to create regular hover effects for a navigation menu, but instead of CSS I use D3 transitions to "soften up" the effect. This works fine using mouseover and mouseout for the .on-method. The problem, though, is that the transition gets stuck if the mouse leaves the hovered link before the transition is done. How does one avoid that side effect?

For instance, with this code, the bottom border is still displayed in orange even after the mouse has moved elsewhere, if you do it too fast:

d3.selectAll("a")
    .on("mouseover", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff")
      .transition()
      .duration(1000)
      .style("border-bottom-color", "#B23600"); })
    .on("mouseout", function() { 
       d3.select(this)
      .style("border-bottom-color", "#fff"); });

• javascript
• hover
• d3.js

Share Improve this question Follow asked Feb 18, 2013 at 19:48 user1781186user1781186 5

• I don't know the perfect answer, but I suspect the mouseout is invoked and pleted before the duration (1s) of the mouseover is pleted. Maybe make a 1100 duration for the mouseout? – cmonkey Commented Feb 18, 2013 at 20:08
• Also, the reading at bost.ocks/mike/transition suggests there are differences between d3 versions 2 and 3. Which version are you using? – cmonkey Commented Feb 18, 2013 at 20:12
• Don't have a perfect answer either but: If, like in your example, you're using HTML (rather than SVG), then you can skip the d3 transitions altogether and use css transitions instead. That'll definitely solve the problem you're having, and it'd be more performant. Users of old browsers won't get a transition, but oh wells... – meetamit Commented Feb 18, 2013 at 20:21
• Hm, I didn't use any transition for the mouseout, but for some reason (I would love an explanation) using a transition for the mouseout as well solved the issue. I'm using version 3 and I set duration to 500 ms for both transitions now. – user1781186 Commented Feb 18, 2013 at 20:21
• I came to this page searching on the same problem, but in reverse - when firing a transition in response to a mouse event, if the pointer stayed still it interrupted the transition. I found a solution by adding the pointer-events: none style to an element enclosing the svg. More details here: stackoverflow./questions/19381375/… – Racing Tadpole Commented May 18, 2014 at 22:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

I think what is going on is that when you have the .transition on only the mouseover, the transition still has not run its course when you leave before 1000ms have expired. So when you leave early, the mouseover transition is still running, and there is no transition call on the mouseout event to override this transition. (Apparently not even the mouseout event will stop the .transition associated with the mouseover event.)

However, as you noted, when you do put a transition on the mouseout event, the problem goes away. And I believe this is because the mouseout transition takes precedence over the mouseover .transition, so having a .transition on the mouseout event puts the mouseout event back in control.

You can see it in action here if you ment out the .transition on the mouseout event.

http://jsfiddle/Ldmv6/1/

Also worth reading is Chapter 10 from Scott Murray's uping d3 book: http://ofps.oreilly./titles/9781449339739/_interactivity.html

本文标签： javascriptD3 mouseover transitions gets quotstuckquotStack Overflow