Transitioning transform and size of divs

[Pierre Massat]

Hi,

I'm trying to build a collide layout with circles that are actually div elements (it's easier for me to use html than svg for what I want to put in these circles later on).

I've made this block to show my problem : https://bl.ocks.org/Mavromatika/58445b1f4c0c3b1e7506259eef1aa6b3

If you hover on the pink circle, the transition is smooth for both transform and size.

For the other circles however, they jump to a new transform before growing (or shrinking) smoothly.

I am doing something wrong ?

Thanks in advance,

Pierre.

[Pierre Massat]

No idea ?

[steve rickus]

OnMouseEnter for the white circles is resetting the value of the radius to the max value. This forces the layout to move all the other circles out of the way. The onMouseEnter function for the pink circle just restyles its height/width, so the layout the other circles is not affected.

[Pierre Massat]

Hi Steve,

Thanks for your response. What you're describing is the intended behaviourof my script. The collide force should adapt to a growing circle.

My problem is that the white circles "jump" to their new "top" and "left" position without transitioning to it, wherease the transition does apply to their "width" and "height" properties. That's what I'm trying to fix.

Pierre.

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/O1UCjhYgBbQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.