基于大小收费 - d3力导向布局

Question

基于大小收费 - d3力导向布局

graphd3.jsforce-layout

14

我正在尝试使用 d3.layout.force 制作一个力导向图，我需要容器可以调整大小 - 也就是说，我希望能够根据大小计算适当的电荷和链接距离值，或者让 d3 在某种神奇的方式下为我完成这些计算。

我已经尝试过（链接：http://jsfiddle.net/VHdUe/6/），但只使用了节点。我将电荷设置为基于节点数量的值，该值适合于半径形状的圆中可以容纳的节点数量。

该解决方案对于一些中等大小的容器有效，但如果您多次点击调整大小，您会发现它并不适用于所有大小...

我唯一能想到的方法是使用 svg 缩放变换，但这会使我的元素的大小不利地受到影响。还有其他选项吗？

PS: 我看过http://mbostock.github.com/d3/talk/20110921/bounding.html（回答D3带有边界框的力导向布局），但我更想要一个基于引力的解决方案，而不是边界框。

- XwipeoutX

http://bl.ocks.org/mbostock/1129492 - Dennis Hackethal

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mbostock · Accepted Answer

除了电荷 (charge)和连线距离 (linkDistance)，你还有引力 (gravity)。如果你想让图形保持相对于布局大小的相同密度，那么你需要同时缩放电荷和引力。这些是决定整个图形大小的主要计算力量。有关更多详细信息，请参见我的力导向布局演讲。

我尝试了几个不同版本，其中这个看起来效果还不错：

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

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

这里的nodes.length / (width * height)与图形密度成线性比例关系：节点面积除以布局面积。电荷力遵循平方反比定律，因此这可能解释了为什么平方根效果良好。D3的“引力”是一个虚拟弹簧，其与布局中心的距离成线性比例关系，因此随着图形变得更密集，它也会增加引力并防止节点逃出边界框。