graph - 基于大小的充电 - d3 力布局

Question

我正在尝试使用 d3.layout.force 制作力有向图，我需要容器可以调整大小——也就是说，我希望能够根据大小计算适当的 Charge 和 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 的“重力”是一个虚拟 Spring ，随着与布局中心的距离线性缩放，因此随着图形变得更密集，这也会增加重力并阻止节点逃离边界框。