根据尺寸收费 - d3力布局

Question

我正在尝试使用d3.layout.force创建一个力导向图，我需要容器可以调整大小 - 我希望能够根据大小计算适当的电荷和linkDistance值，或者d3以某种神奇的方式为我做这件事。

我做了一次只使用节点的尝试（链接：http://jsfiddle.net/VHdUe/6/）。我将电荷设置为一个值，该值基于适合整个圆形半径的节点数量，它往往形成如下形状。

该解决方案适用于某些中型容器，但如果您点击几次调整大小，您可以看到它并不适用于所有尺寸......

我能看到的唯一前进方法是使用svg缩放变换，这会使我的元素大小变得不利。还有其他选择吗？

PS：我看过http://mbostock.github.com/d3/talk/20110921/bounding.html（D3 force directed layout with bounding box的答案），但我更倾向于使用基于引力的解决方案，而不是边界框。

Answer 1

除charge和linkDistance外，您还有gravity。如果您希望图形保持与布局大小相同的相对密度，那么您将需要缩放电荷和重力。这些是决定blob总体大小的两个主要计算力量。有关详细信息，请参阅my force layout talk。

我尝试了几个不同的版本，这个版本看起来效果很好：

var k = Math.sqrt(nodes.length / (width * height));

layout
    .charge(-10 / k)
    .gravity(100 * k)

此处nodes.length / (width * height)与图密度成线性比例：节点面积除以布局面积。充电力跟随inverse-square law，这可以解释为什么平方根运作良好。 D3的“重力”是一个虚拟的弹簧，随着距离布局中心的距离线性缩放，因此当图形变得更密集并且阻止节点逃离边界框时，这也会增加重力。