javascript - d3.js 链接强度对力图中的链接距离的影响

标签 javascript d3.js force-layout

我正在制作一个图表来显示不同节点之间的关系。节点之间的关系越密切(根据业务逻辑),节点之间的距离应该越近。

我注意到一些带有 .1linkStrength 的链接是 shorter (这是我想要实现的),而另一些则带有与 1linkSength 相同的强度更长。从有关力布局参数的文档中,我现在找到了这句话:

The default linkStrength value is 1.0, which maintains the full effect of linkDistance. By setting the value of linkStrength less than 1, though, the distance constraint can be relaxed.

这是否意味着如果我将 linkDistance 设置为 150,带有 linkStrength(1.0) 的链接将比 150 更接近linkStrength(.1) 的那些?如果是,它们是否需要更短、更长或根本不重要?因为我对布局有点惊讶。

最佳答案

长话短说:当使用 D3 的强制布局时,没有内置方法来强制链接的固定长度。力布局本质上是动态的,并为 force.linkDistance() 设置值和 force.linkStrength()在力布局运行时,在每次迭代(即每个 tick)上执行的一组计算中引入了另一种力。

每个tick上计算三个力:

1. Link length . 首先要计算的力是通过上述方法设置的连杆长度的调整。这是在每个链接的循环中完成的,查看源代码,这基本上可以归结为 one line代码:

l = alpha * strengths[i] * ((l = Math.sqrt(l)) - distances[i]) / l;

l 计算为链接的源节点和目标节点之间的欧几里德距离,所需的链接距离 distances[i] 和链接的 strengths[ i] 这一行决定了如何将两个节点拉在一起或将它们分开以近似通过 force.linkDistance() 设置的链接距离。很容易看出,链接强度对合力具有线性影响。但是,与 API 文档相反,它定义了强度在区间 [0,1] 内的有效范围,源代码没有对 设置的值施加任何限制force.linkStrength().

<强>2。 Gravity . 计算的第二个力将考虑gravitational forces在每个节点上。

3. Charge . 最后,节点的charges 的相互作用力。计算出来的。

因为所有计算的力的影响都是叠加的,并且会累加到给定刻度的每个节点的最终移动,很明显,链接长度只是整个计算的一部分。其他两种力量可能会削弱甚至逆转其效果。

至于你的问题

Does that mean that if I was to set linkDistance to 150, the links with linkStrength(1.0) will be closer to 150 than the ones with linkStrength(.1)?

结果很大程度上取决于力布局参数的设置和节点的分布,仍然不能保证链接的最终长度。

关于javascript - d3.js 链接强度对力图中的链接距离的影响,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34355120/

相关文章:

javascript - 为什么 jQuery keyup 重复触发?

javascript - 像推特一样解​​析日期的问题

javascript - 网络图

javascript - D3.js 强制有向图,通过使边相互排斥来减少边交叉

javascript - 如何在主节点中设置私有(private)链接,使其无法被laravel中的子节点访问

javascript - 如何更改跨度显示样式,同时更改该跨度的 innerHTML

javascript - D3 : Links between spouses in a family tree

javascript - 如果源 json 更新(添加或删除项目),则动态更新 D3 Sunburst

force-layout - 使用多个连接组件时,D3 强制 v3 和 v4 之间的布局差异

javascript - D3 强制布局 : How to maintain a given minimum distance between nodes?