D3气泡强制布局动画

Question

我正在尝试构建一个简单的D3 Bubble force布局，我正在关注一些示例并获得良好的结果:)这是当前状态：

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。它并不完美 - 最初有一些跳跃。这可以通过更合适的alpha值来改进。