了解D3.js中的碰撞检测

Question

我正在玩d3.js和碰撞检测，我不知道如何实现它。我有一个jsfiddle

http://jsfiddle.net/mrtriangle/3wgfrrnv/

简单代码：

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

}

这只是随机浮动的圈子svg对象。非常感谢洞察碰撞检测的机制。一如既往，谢谢！