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

标签 javascript algorithm d3.js force-layout

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

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

没有条件限制节点向哪个方向移动。一种方法是检查坐标和距离,然后计算要移动哪些节点、移动多少、朝什么方向移动并相应地执行代码。但是,在 d3 中有更简单的方法吗?

最佳答案

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

force.linkDistance

force.linkStrength

关于javascript - D3 强制布局 : How to maintain a given minimum distance between nodes?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19364573/

相关文章:

javascript - 使用 jquery 动态生成标记时不显示

javascript - 为什么我不能将其他 css 元素应用到我的自定义 css 类?

javascript - Emacs 模式与 HTML 和 JS 集成

javascript - 如何 mvvm 数据绑定(bind)剑道单选按钮值属性?

javascript - 模型绑定(bind)器未拾取表单编码的 Javascript int []

algorithm - 递归代码的空间复杂度

java - 驱动 NxN 二维数组搜索的曼哈顿距离

node.js - SVG 到 PNG 服务器端 - 使用 node.js

algorithm - 返回最大可能矩形 block 中可用空间的算法是什么?

javascript - 如何通过计算 d3.js 中的 `index` 值来添加动画延迟?