CODEWITHSUNDEEP
javascriptd3.jstransition
PCoelho
PCoelho

Reputation: 8010

d3js transition step function

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?

Upvotes: 4

Views: 2338

Answers (1)

cyon
cyon

Reputation: 9538

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.

Upvotes: 4

Related Questions