canvas绘制力导向图需用requestanimationframe实现流畅动画，结合引力、斥力等物理模型更新节点位置，并通过事件监听支持拖拽缩放等交互，适合大规模节点渲染。
Canvas 绘制动态交互的力导向图，核心在于用 requestAnimationFrame 实现流畅动画、用物理模型模拟节点间斥力/引力，并通过事件监听支持拖拽、缩放、点击等交互。它比 SVG 更适合大规模节点（上千个），但需手动管理坐标、重绘与状态。
力模型与更新逻辑
力导向图本质是粒子系统：每个节点受引力（连接边）、斥力（所有节点间）、可选阻尼力和定位力（如中心锚定）共同作用。每次帧循环中需：
- 遍历所有边，按胡克定律计算引力（
F = k * (distance - restLength)），累加到两端节点上 - 遍历所有节点对，用库仑斥力公式（
F = k / distance²）计算排斥力，避免距离过近时爆炸（加最小距离截断） - 添加阻尼项（
velocity *= 0.98）稳定系统；可加入温度衰减控制抖动 - 更新节点位置：
node.x += node.vx; node.y += node.vy
Canvas 渲染优化技巧
Canvas 每帧需清空再重绘，但盲目 clearRect 会闪烁或掉帧。推荐做法：
- 仅清除上一帧绘制区域（用
getBoundingClientRect+ 缩放偏移算出可视区），或使用双缓冲 canvas（隐藏 buffer canvas 先画，再drawImage到主 canvas） - 节点和连线分层绘制：先画边（
lineTo批量路径），再画节点（arc或fillRect），最后叠加标签（fillText，注意裁剪防溢出） - 对静态背景（如网格线、坐标轴）单独缓存一次，不随帧重绘
- 节点数量 > 500 时，跳过半径 ctx.imageSmoothingEnabled = false）提升性能
交互事件绑定策略
Canvas 本身无 DOM 事件冒泡，需将鼠标坐标映射到图坐标系（考虑缩放、平移）后判断命中：
- 拖拽节点：监听
mousedown→ 计算最近节点（欧氏距离），标记dragging = node；mousemove中直接赋值node.x/y，并禁用力计算（设node.fx = node.x; node.fy = node.y锚定） - 点击高亮：
click后遍历节点，若距离 ctx.isPointInPath() 精确判断圆形/自定义形状 - 缩放和平移：用
wheel获取 delta，更新全局scale和offsetX/Y；重绘时统一应用变换矩阵（ctx.setTransform(scale, 0, 0, scale, offsetX, offsetY)）
状态管理与调试辅助
力导向图易陷入局部最优或震荡，需可观测性支持：
- 暴露
tick()方法供外部调用，便于暂停/步进/重置；保存上一帧节点位置用于插值（减少跳跃感） - 添加调试开关：绘制力向量（小箭头）、速度热力图、收敛指标（总力大小均值
- 导出当前布局为 JSON（含
x,y,vx,vy,fx,fy），支持恢复或离线分析 - 对长连接边启用贝塞尔曲线（
quadraticCurveTo）提升视觉可读性，但注意性能开销
