CODEWITHSUNDEEP
d3.jstransition
hobbes3
hobbes3

Reputation: 30218

How to not interrupt a mouseover d3 transition on mouseout?

I have a piece of code that moves a line on mouseover like this:

some_svg
    .on("mouseover", function() {
        my_line.transition().attr("transform", function(d) {
            return "translate(" + [d.new_x, d.new_y] + ")";
        });
    })

However let's say the transition takes a whole second to complete (I believe this is the d3 default), if I were to move the mouse over some_svg then quickly move the mouse out before one second, then the line stops as soon as I move the mouse out and it will be partly done with the transition. In other word, the line will be in some position between the old and new position.

How do I make sure the transition will always complete no matter if I move the mouse out (as long as I don't move it back to another some_svg)?

Upvotes: 0

Views: 669

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

The default duration (if you don't set one) is 250ms.

The simpler way to do not interrupt a mouseover transition is not setting a mouseout behaviour that changes the transition. As long as you don't move to an element that has an mouseover/mousemove event handler that interferes with the ongoing transition, the transition will complete. That being said, I cannot understand or reproduce your statement ("the line stops as soon as I move the mouse out and it will be partly done with the transition").

This is easy to confirm: hover over the rectangle below. It will complete it's transition regardless you move the mouse out of it.

d3.select("rect").on("mouseover", function(){
	d3.select(this).transition().duration(5000).attr("transform", "translate(350, 0)");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="400" height="200">
	<rect x="0" y="50" width="40" height="20" fill="teal"></rect>
</svg>

Upvotes: 1

Related Questions