CODEWITHSUNDEEP
javascriptd3.js
malwin
malwin

Reputation: 664

d3.js repeat transition independently

I want two points move around two bigger circles with unequal speed. It's based on Mike Bostock's "Point-Anlong-Path Interpolation". It's realized by calling a transition with the .attrTween. The repetition is done by looping the transition-function

function circleTransition() {
  circleMove.transition()
    .duration(function(d) {
      return d.rotSpeed * 1000;
    })
    .ease(d3.easeLinear)
    .attrTween("transform", translateAlong(circlePath.node()))
    .on("end", circleTransition);
}

Right after the faster point finishing it's round, the slower point jumps back to the start-point and, obviously, the round starts again. How can I prevent this and make each point stay continuously in it's orbit?

I prepared a JSFiddle: https://jsfiddle.net/FFoDWindow/hbdw525w/5/. Thanks.

Upvotes: 2

Views: 388

Answers (1)

malwin
malwin

Reputation: 664

I was able to figure it out myself. I updated my fiddle:

https://jsfiddle.net/FFoDWindow/hbdw525w/9/

I had to loop over all circles and run this function for every single circleMove-object. Here is the interesting part of the code:

circleMove.each(function transition(d){
    d3.select(this).transition()
    .duration(function(d) {
      return d.rotSpeed * 1000;
    })
    .ease(d3.easeLinear)
    .attrTween("transform", translateAlong(circlePath.node()))
    .on("end", transition);
})

Upvotes: 2

Related Questions