A somewhat crazy method for turning an asynchronous d3 transition into something that can be paused/fast-forwarded/rewound while still using the nice syntax, easing, interpolation, etc. of d3.transition
.
After a transition is declared with normal syntax, calling .record()
on a selection inspects each element in a selection for the internals of its most recent transition. It generates an array of tweeners based on the transitions’ tweens, the easing, and the elements’ data. It then returns a wrapper function that will loop through and apply all of those tweeners for any arbitrary time value t (between 0 and 1).
This operates on the entire set of elements in the transition, but you could make it per-element with some changes.
This version only records the most recent transition and ignores delays. For a version that respects delays and chained transitions, see this example.