d3js - SVG圆在光滑的永动机

我正在尝试用d3js动画一个圆圈云。我想要得到的是一个随机的光滑的永久运动，所有的圆都围绕它们的初始位置"引力"。

到目前为止，我得到了这个:http://jsfiddle.net/vnr1f9f8/6/

这里的问题是运动一点也不平滑。圆圈移动，然后停止，然后重新开始。

我该如何解决这个问题?

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