d3.js linkStrength 在力图中对 linkDistance 的影响 [英] d3.js linkStrength influence on linkDistance in a force graph

查看:23
本文介绍了d3.js linkStrength 在力图中对 linkDistance 的影响的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在制作一个图表来显示不同节点之间的关系.节点关联得越近(根据业务逻辑),节点应该越靠近.

I'm working on a graph to show relations between different nodes. The closer related the nodes are (according to business logic), the closer together the nodes should be.

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

I noticed that some links with the linkStrength of .1 are shorter (that is what I wanted to achieve) and some others with the same strength are longer than the ones with the linkStength of 1. From a documentation about the force layout parameters I now found this quote:

默认的linkStrength值为1.0,保持了linkDistance的全部效果.但是,通过将linkStrength 的值设置为小于1,可以放宽距离约束.

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 设置为 150linkStrength(1.0) 的链接将比 150 更接近那些带有 linkStrength(.1) 的?如果是,它们是否需要更短、更长或根本不重要?因为我对布局有点惊讶.

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)? And if yes, do they need to be shorter, longer or doesn't that matter at all? Because I was kind of surprised about the layout.

推荐答案

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

To cut a long story short: when using D3's force layout there is no built-in way to enforce a fixed length of the links. The force layout is inherently dynamic and setting values for force.linkDistance() and force.linkStrength() introduces just another force to the set of calculations carried out on each iteration, i.e. each tick, while the force layout is running.

在每个 tick 上计算三个力:

1.链接长度.要计算的第一个力是通过上述方法设置的连杆长度的调整.这是在每个链接的循环中完成的,查看源代码,这基本上归结为 一行代码:

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

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

With l calculated to be the Euclidean distance between the link's source node and target node, the desired link distance distances[i] and the link's strengths[i] this line determines how to pull both nodes together or push them apart to approximate the link distance set via force.linkDistance(). It's easy to see, that the link strength has a linear effect on the resulting force. Contrary to the API documentation, though, which defines the valid range for the strength to be in the interval [0,1], the source code does not impose any restrictions on the value set by force.linkStrength().

2.重力.要计算的第二个力将考虑每个节点上的重力.

3.收费.最后,计算节点的费用的相互作用力.

因为所有计算的力的影响都是叠加的,并且会叠加到给定滴答的每个节点的最终运动,所以很明显,链接长度只是整个计算的一部分.另外两种力可能会减弱甚至逆转其作用.

Because the effects of all the calculated forces are superimposed and will add up to the resulting movement of each node for a given tick, it becomes clear, that the link length is only one part of the entire computation. The other two forces may weaken or even reverse its effect.

至于你的问题

这是否意味着如果我将 linkDistance 设置为 150,带有 linkStrength(1.0) 的链接将比带有 linkStrength(.1) 的链接更接近 150?

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)?

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

The outcome depends largely on the setup of the force layout's parameters and the distribution of the nodes, and still no guarantee is made regarding the final lengths of the links.

这篇关于d3.js linkStrength 在力图中对 linkDistance 的影响的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆