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。這不是很完美 - 有一些跳動開始。這可能與阿爾法更合適的值來提高...