D3气泡力布局动画

Question

我想要建立一个简单的D3泡泡力布局，我下面的一些例子，效果不错:)这是当前的状态：

http://jsfiddle.net/2YhQR/1/

circle.on('mouseover', function() { 
    d3.select(this).transition().attr('r', function(d) { 
     return d.bigradius; 
    }); 
}); 

circle.on('mouseout', function() { 
    d3.select(this).transition().attr('r', function(d) { 
     return d.radius; 
    }); 
}); 

当鼠标悬停它变得更大使用很好的过渡，我想其他的气泡动画也以腾出空间给更大的泡沫泡沫。但我不知道该怎么做。

预先感谢您。

Answer 1

实现这一目标的最简单的方式就是当过渡完成后调用tick功能与更新的半径重新运行力布局（尤其是碰撞功能），例如。

circle.on('mouseover', function() { 
    d3.select(this).transition().attr('r', function(d) { 
     d._radius = d.radius; 
     d.radius = d.bigradius; 
     return d.bigradius; 
    }).each("end", function() { tick({alpha: 1e-6}); }); 
}); 

概念验证here。这不是很完美 - 有一些跳动开始。这可能与阿尔法更合适的值来提高...