根据尺寸收费 - 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的“重力”是一个虚拟的弹簧，它随着距布局中心的距离线性缩放，因此当图形变得更密时，这也会增加重力，并且阻止节点逃离边界框。