block by veltman d1b8c76c16ceab5d3b45

Transition hacking

Full Screen

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.

index.html

d3-record.js