dynamic transitions in d3

[Sean McKenna]

Goal:

I would like to dynamically control a transition using some user input - this could be as a user scrolls down the page or through a UI slider or drag motion between objects. The dynamic nature here means that you can step forward & backward along any step of the transition, so no automatic, time-based transitions are occurring and the transition is never "finished" since it can always be "replayed" by the user. For a motivational example: http://www.r2d3.us/visual-intro-to-machine-learning-part-1/

Challenge:

The d3 transition module (https://github.com/d3/d3-transition) utilizes a duration or time, so all d3 transitions get scheduled as events and are terminated upon completion. All other aspects of the transitions API are desired to be supported (e.g. interpolation, easing).

Possible solutions:

1. It is possible to pause and resume d3 transitions: https://github.com/d3/d3/issues/118. This could result in undesired lag with interaction, and time is still playing a part in the definition of these transitions.
   
   
2. Custom transition tweening functions could be utilized to show a given state of a transition based on some programmatic variables, where the transition must use a long duration or repeatedly scheduled over and over. Here the code to write is also less than ideal due to this repetitive scheduling.
   
   
3. The web document can be set to repaint an animation by the browser, using window.requestAnimationFrame (https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame). This enables transitioning between multiple states, except that the "transitions" must be manually defined with your own custom scales/interpolators/tweens for all objects you wish to move/change, which easily gets messy as transitions get more complex. An example of this can be seen here: http://bl.ocks.org/tonyhschu/af64df46f7b5b760fc1db1260dd6ec6a

My question - is there a better way? Am I missing a good way to support dynamic transitions? Or does one need to be written?

Ideally, this would have full support of the transitions API, where little code is necessary for set-up, automatic interpolation between attributes and styles, and different easing is supported.

Thank you in advance for any thoughts!