D3.js forceSimulation可变link距离配置不生效问题咨询

原生D3.js v4及以上版本均已支持为不同连线设置独立距离，无需引入额外插件，你需要实现的极小间距相邻节点需求完全可行，当前配置未生效是代码中存在多大力参数冲突、语法错误导致的，具体修改点如下：

• 1. 修复基础语法错误
     你创建容器的代码中class属性值未加引号，会导致变量未定义报错：

  // 错误写法
  var linksContainer = svg.append("g").attr("class", linksContainer)
  var nodesContainer = svg.append("g").attr("class", nodesContainer)
  // 修正为
  var linksContainer = svg.append("g").attr("class", "linksContainer")
  var nodesContainer = svg.append("g").attr("class", "nodesContainer")
  

• 2. 调低碰撞检测半径
     当前forceCollide设置的半径为90，意味着任意两个节点的最小距离不能小于180（两个节点碰撞半径之和），直接覆盖了你设置的极小连线距离，将碰撞半径调整为和节点半径一致即可：

  // 节点圆半径为30，碰撞半径也设为30，两个节点最小距离为60，刚好边贴边无空隙
  .force("collision", d3.forceCollide().radius(30))
  

  如果你需要节点略微重叠实现更紧凑的效果，可以进一步调低碰撞半径到25-28之间。
• 3. 调高连线力的强度
     当前你设置的连线strength为0.1，力的强度过低，无法抵消节点斥力、碰撞力的影响，无法达到你设定的目标距离，调高strength到0.8以上即可让连线距离配置优先生效：

  .force("link", d3.forceLink().id(d => d.id).distance(linkDistance).strength(0.9))
  

• 4. 可选：调低节点斥力
     如果你需要多组极近间距的节点，可以适当调低forceManyBody的斥力数值，避免节点之间的排斥力过大抵消连线拉力：

  .force("charge", d3.forceManyBody().strength(-30))
  

修改完成后，你连线中设置的distance:0.1、新增节点的distance:1都会正常生效，两个节点会紧密贴合几乎没有空隙。

内容的提问来源于stack exchange，提问作者ICoded