根据尺寸收费 - d3力布局

Question

我正在尝试使用力量导向图d3.layout.force,我需要容器可调整大小 - 我希望能够根据大小计算适当的电荷和linkDistance值,或者让d3为我做一些神奇的方式.

我做了一个尝试(链接:http://jsfiddle.net/VHdUe/6/)只使用节点.我将电荷设置为一个值,该值基于适合横跨圆形半径的节点数量.

该解决方案适用于一些中型容器,但如果您单击调整大小几次,您可以看到它并不适用于所有大小的...

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

PS:我已经看过http://mbostock.github.com/d3/talk/20110921/bounding.html(带有边界框的D3力导向布局的答案),但我更倾向于使用基于引力的解决方案而非边界框一个.

Answer 1

除了充电和linkDistance,你还有重力.如果您希望图形保持与布局大小相同的相对密度,那么您将需要缩放电荷和重力.这些是决定blob总体大小的两个主要计算力量.有关详细信息,请参阅我的强制布局说明

我尝试了几个不同的版本,这个版本似乎工作得很好:

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

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

这nodes.length / (width * height)与图密度成线性比例:节点面积除以布局面积.充电力遵循平方反比定律,这可以解释为什么平方根运作良好.D3的"重力"是一个虚拟的弹簧,它与布局中心的距离呈线性比例,因此当图形变得更密集并且阻止节点逃离边界框时,这也会增加重力.