Prevent transition from being interrupted unless corresponding target values have been fulfilled.

[Drew Winget]

Please see this fiddle: https://jsfiddle.net/he85wx2f/

I am representing a collection of "pages" or "items". When the container area is resized, they should nicely reflow themselves to spread down into the narrowed, or out into the expanded space. The implementation above works, but all transitioning elements are choked and frozen on intervening resize events and new transitions are applied to them, defeating the potential elegance of this interaction.

How can I apply a new transition only to elements whose target x and y values have changed? When resizing the window, "pages" previously "in-flight" will remain in flight unless their destination has changed.

In general this is my only qualm with d3's animation system, one of the very few cases not handled nicely (in a way I know of) by the transition construct. In other animation systems, this use case is often handled by means of a "spring", where a maximum total time is allowed for a transition, so that changes in the tween's target value do not change an object's velocity or interpolation curve. The object simply gets where it's going in the allotted total time.

I have been through a number of idiosyncratic animation examples but have not found a method to handle this comfortably. Any help is appreciated.

-Drew