Javascript d3js-SVG圆在平滑的永久运动中

我正在尝试用d3js制作一个圆形云的动画。我想得到的是一个随机平滑的永久运动，所有的圆都围绕着它们的初始位置“受引力”

到目前为止，我得到了：

这里的问题是，运动一点也不平稳。圆圈移动，然后停止并再次开始

我怎样才能解决这个问题

以下是我使用的d3代码：

    var svg = d3.select('body').append('svg')
            .attr("width", 960)
            .attr("height", 480);

var circleContainer = [];

for (var i = 0; i < 10; i++) {
    var originX = 100 * (1 + 2.5 * Math.random()),
        originY = 80 * (1 + 2.5 * Math.random());

    circleContainer[i] = svg.append('circle')
            .attr('class', 'circle-' + i)
            .attr('cx', originX)
            .attr('cy', originY)
            .attr('originX', originX)
            .attr('originY', originY)
            .attr('r', 20)
            .attr('fill','red');
}


transition();

function transition() {
    for (var i = 0; i < 10; i++) {
        circleContainer[i].transition()
            .duration(1000)
            .attr('cx',  circleContainer[i].attr('originX') * (1 + Math.random()/10))
            .attr('cy',  circleContainer[i].attr('originY') * (1 + Math.random()/10))
            .each("end", transition)
            .ease("linear");
    }
}

var svg=d3.select（'body'）.append（'svg'））
.attr（“宽度”，960）
.attr（“高度”，480）；
变量circleContainer=[]；
对于（变量i=0；i<10；i++）{
var originX=100*（1+2.5*Math.random（）），
originY=80*（1+2.5*Math.random（））；
circleContainer[i]=svg.append（'circle'））
.attr（'class'，'circle-'+i）
.attr（'cx'，originX）
.attr（'cy'，原文）
.attr（'originX'，originX）
.attr（'originY'，originY）
.attr（'r'，20）
.attr（'fill'，'red'）；
}
过渡（）；
函数转换（）{
对于（变量i=0；i<10；i++）{
circleContainer[i].transition（）
.持续时间（1000）
.attr（'cx'，circleContainer[i].attr（'originX'）*（1+Math.random（）/10））
.attr（'cy'，circleContainer[i].attr（'originY'）*（1+Math.random（）/10））
.每个（“结束”，过渡）
.ease（“线性”）；
}
}

您可以添加

.ease（“线性”）

使其平滑。这里是jsfiddle-

谢谢您的帮助。有没有一种方法可以使环状物的轨道更像一条平滑的曲线？你是想让它进入轨道吗？