【问题标题】:D3 force layout: How to maintain a given minimum distance between nodes?D3力布局:如何保持节点之间给定的最小距离?
【发布时间】:2013-10-14 16:14:31
【问题描述】:

我正在使用强制布局。通过在 div 元素内单击来创建新的 d3 节点。节点是在单击点创建的。节点是大小为 50 像素 x 50 像素的矩形。创建节点后,我立即将其固定属性设置为 true,以便它不会自行移动。我不是在调用 force.drag。可以通过按住 ctrl 键并拖动节点来移动节点。可以通过将鼠标(不按住 ctrl 键)从一个节点拖动到另一个节点来创建边缘。

现在,我想添加以下功能。 任何两个节点之间的最近距离应该大于某个最小值。您可以为最小距离假定任何正值。让我们假设 100 像素。当任何新节点创建得太靠近现有节点时,节点应该移动,以使任意两个节点之间的距离超过 100 像素。类似地,当一个节点被移动并太靠近另一个节点时,节点也应该移动以保持最小 100 像素的距离。

对于移动哪些节点以及向哪个方向移动没有条件。一种方法是检查坐标和距离,然后计算要移动的节点、移动量、方向并相应地执行代码。但是,在 d3 中有没有更简单的方法?

【问题讨论】:

  • 没有更简单的方法。力布局不支持指定最小距离。

标签: javascript algorithm d3.js force-layout


【解决方案1】:

考虑只使用force.linkDistance()force.linkStrength() 来实现这一点。 linkDistance 表示您的最小距离约束,linkStrength(在 [0, 1] 的范围内)决定了链接距离的“刚性”程度,或者模拟可以覆盖多少 linkDistance。

force.linkDistance

force.linkStrength

【讨论】:

  • 如果我使用linkDistance和linkStrength,是否必须使用force.drag?我可以继续让固定属性保持为真,还是必须将其设置为假?
  • 你不需要使用force.drag,但不幸的是固定节点不会响应linkDistance,因为它依赖于模拟,并且固定节点不受模拟。
猜你喜欢
  • 1970-01-01
  • 2015-07-21
  • 2018-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-03-25
  • 2014-06-23
  • 2018-05-25
相关资源
最近更新 更多