d3js transition step function

d3.js, javascript, transition

Solution

From the documentation it sounds like `tweens` are evaluated at every step.

While the transition runs, its tweens are repeatedly invoked with values of t ranging from 0 to 1. In addition to delay and duration, transitions have easing to control timing. Easing distorts time, such as for slow-in and slow-out. Some easing functions may temporarily give values of t greater than 1 or less than 0; however, the ending time is always exactly 1 so that the ending value is set exactly when the transition ends. A transition ends based on the sum of its delay and duration. When a transition ends, the tweens are invoked a final time with t = 1, and then the end event is dispatched.

So I suppose what you could try is add a custom `tween` function maybe like this:

obj.transition()
 .tween("customTween", function() {
     console.log("This is the tween factory which is called after start event");
     return function(t) {
        console.log("This is the interpolating tween function");
     };})
  .ease("quad") 
  .durantion(250).attr("cy", function(d){
    return d*d;});

However, since `tweens` are intended for interpolation, using them for something else is probably a bad idea and an abuse of the api.

Have you considered using a multi-stage transition? That would be one where you add an `each("end", function() { nextStep(...) })` and the `nextStep` starts a new transition. You could then shorten the durations of the individual transitions and perform your actions whenever `nextStep` is entered.

Problem

I am using transitions in d3js and it works fine. However, is there a way to fire a function everytime the object position is updated? (for every step) Here is a some fake code: ``` obj.transition() .ease('quad') .durantion(250) .attr('cy', function(d) { return d*d; }); ``` I know that if you put the each(type, fn) you can get the events from end and start. But no step is available. ``` obj.transition() .ease('quad') .duration(250) .attr('cy', function(d) { return d*d; }) .each('start', function(d) { console.log('x'); }); ``` Is there a way to do this?

Original source