d3.js повторный переход независимо

Question

Я хочу, чтобы две точки двигались вокруг двух больших кругов с неравной скоростью. Это основано на «Интерполяции« Пойнт-Анлонг-путь »Майка Бостока. Это реализовано путем вызова transition с .attrTween. Повторение делается с помощью цикла переходной-функции

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

Сразу после более быстрой точки отделочного это круглое, тем медленнее точка переходит обратно к начальной точке и, очевидно, раунд начинается снова. Как я могу предотвратить это и заставить каждую точку постоянно оставаться на ее орбите?

Я подготовил JSFiddle: https://jsfiddle.net/FFoDWindow/hbdw525w/5/. Благодарю.

Answer 1

Я сам смог разобраться. Я обновил свою скрипку:

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

мне пришлось перебрать все круги и запустить эту функцию для каждого circleMove -объекта. Вот интересная часть кода:

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); 
})