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