JS中实现互斥力解决一维圆形布局碰撞重叠问题咨询

作用力通用命名 #

这类用于避免元素重叠的互斥力布局在可视化领域的通用命名是碰撞避免力导向布局，针对你这个仅允许横向位移的一维场景，专项实现通常被称为「一维斥力碰撞校正」，也属于1D force-directed layout的子集。如果你之前接触过D3的力导向模块，对应就是forceCollide的一维精简实现。

理论资料查找路径 #

你可以按以下优先级查找相关理论资料：

• 优先学习力导向布局基础理论：核心涉及胡克定律（斥力计算的核心依据）、速度/位移衰减模型（避免布局反复震荡无法收敛），这部分内容在通用计算机图形学入门教材、信息可视化原理类专业书籍中都有完整讲解
• 其次可查找一维离散元素布局的专项优化方案，这类内容在可视化领域工程实践类的技术文档、学术论文中都有收录，你这个场景不需要做二维坐标遍历，计算复杂度比通用力导向布局低很多
• 最后可以参考散点图的碰撞避免实现逻辑，和你的场景匹配度极高，仅需要把二维的位移限制修改为仅允许X轴方向位移即可

适配原生JS + svg.js的实现方案 #

你不需要引入额外依赖，几十行代码就能实现核心能力，思路和示例代码如下：

核心逻辑 #

1. 初始化阶段：将所有圆形的初始X坐标设为数据集原始水平位置，每个元素暂存一个位移增量变量，初始值为0
2. 迭代计算阶段（通常迭代10-30次即可收敛）：
   • 遍历所有圆形对，计算两个圆形的圆心距，如果距离小于两个半径之和即判定为碰撞
   • 计算斥力大小：斥力 = (两半径之和 - 圆心距) * 刚度系数，刚度系数推荐设为0.1-0.5，系数越大校正速度越快，也越容易出现震荡
   • 两个碰撞的圆形分别向相反的X轴方向分配位移增量，叠加衰减系数（推荐0.8-0.9）避免位移无限放大
3. 可选边界校正：如果有标尺边界限制，每次迭代后把超出边界的圆形位置拉回边界范围内即可

示例代码 #

// circles 为你的元素数组，格式为 { rawX: 原始水平位置, r: 半径, el: svg.js 创建的圆形实例 }
const circles = [/* 你的数据 */]
const stiffness = 0.3 // 刚度系数
const damping = 0.85 // 位移衰减系数
const iterations = 20 // 迭代次数
const canvasMinX = 0 // 标尺左边界
const canvasMaxX = 800 // 标尺右边界，根据你的画布尺寸调整

// 初始化圆心位置
circles.forEach(c => c.x = c.rawX)

for (let i = 0; i < iterations; i++) {
  // 重置当前轮次的位移增量
  circles.forEach(c => c.dx = 0)

  // 计算所有两两元素的碰撞斥力
  for (let a = 0; a < circles.length; a++) {
    for (let b = a + 1; b < circles.length; b++) {
      const ca = circles[a]
      const cb = circles[b]
      const dist = cb.x - ca.x
      const minDist = ca.r + cb.r

      if (Math.abs(dist) < minDist) {
        const overlap = minDist - Math.abs(dist)
        const move = (overlap * stiffness) * (dist < 0 ? -1 : 1)
        ca.dx -= move
        cb.dx += move
      }
    }
  }

  // 应用位移，做边界校正
  circles.forEach(c => {
    c.x += c.dx * damping
    // 边界限制，避免圆形跑出标尺范围
    c.x = Math.max(canvasMinX + c.r, Math.min(c.x, canvasMaxX - c.r))
    // 更新svg元素位置，svg.js的circle.x()是左上角坐标，要减去半径对齐圆心
    c.el.x(c.x - c.r)
  })
}

你可以根据实际效果调整三个参数的数值，迭代次数越高最终布局越均衡，不需要依赖任何第三方布局库即可实现需求。 #

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