d3.forceSimulation是D3 v4+中基于事件循环的力导向图核心，支持模块化配置斥力、连线、向心等独立力模型，可动态增删节点/边，并通过alphaDecay和velocityDecay精细控制收敛，避免抖动或卡死。
直接用 d3.forceSimulation 就能跑起来，不用等“加载完所有库”或“配好构建工具”——只要引入 D3 v4+，写 50 行 JS 就能出图。关键不是“怎么搭环境”，而是“怎么让节点不堆一起、连线不穿模、拖拽后还能稳住”。
为什么 d3.forceSimulation 比 d3.layout.force（v3）更值得从现在开始用
v3 的 d3.layout.force 已废弃，v4+ 统一为基于事件循环的 d3.forceSimulation，核心差异在控制粒度：
-
d3.forceSimulation把每种力（斥力、连线、向心、碰撞）拆成独立可配置模块，比如d3.forceManyBody().strength(-300)可单独调节点间斥力强度，而 v3 的.charge()是个黑盒参数 - v4 支持运行时动态增删节点/边：
simulation.nodes(newNodes).force('link').links(newLinks)，v3 必须重置整个 force 实例 - v4 的
.alphaDecay(0.015)和.velocityDecay(0.3)能更精细控制收敛速度，避免节点抖动或卡死 - 兼容现代浏览器，无 IE 依赖；v3 的
d3.v3.min.js在 Chrome 110+ 已出现 SVG 渲染偏移问题
节点堆叠、连线重叠？先加这三项基础力
90% 的布局崩坏源于力配置缺失或冲突。必须显式声明以下三项，顺序无关但缺一不可：
-
d3.forceLink(links).id(d => d.id)：指定边数组，并用.id()告诉 D3 如何匹配节点（否则source/target会按索引硬绑，数据重排就错乱） -
d3.forceManyBody().strength(-200)：负值是斥力，-200 是较稳妥起点；若节点仍粘连，可降到 -400；若飞散太快，调高到 -100 -
d3.forceCenter(width / 2, height / 2)：提供锚点，否则节点会整体漂移出画布
别急着加 forceCollide——它在节点少于 20 个时反而导致震荡；真要防重叠，优先调大 forceManyBody().strength() 和缩小节点 radius。
SVG 中画连线和节点，enter() 后必须绑定 data() 再更新
常见错误：只对新节点调 .enter().append()，却忘了在每次模拟 tick 时同步位置。正确流程是：
- 初始化时：用
svg.selectAll('.link').data(links).enter().append('line')创建连线元素 - tick 回调中：
linkElements.attr('x1', d => d.source.x).attr('y1', d => d.source.y)...—— 注意这里d.source和d.target是 D3 自动注入的引用，不是原始数据里的对象 - 节点同理：
nodeElements.attr('cx', d => d.x).attr('cy', d => d.y)，且必须用cx/cy（circle）或x/y（text），不能混用transform否则力模拟坐标不同步
漏掉任意一项，都会出现“节点动了但连线不动”或“鼠标悬停失效”的现象。
中文标签模糊、缩放后文字错位？两个硬性处理点
D3 力导向图默认不处理文本渲染细节，中文需手动干预：
- 字体必须内联声明：
text.style('font-family', 'PingFang SC, Microsoft YaHei, sans-serif')，不能靠 CSS 继承，否则缩放时失真 - 文字居中要用
text-anchor="middle" dominant-baseline="middle"，且绑定位置时取d.x和d.y，而非d.x + 5这类 magic number - 如果开启 zoom，务必在 zoom 回调里重新设置
text的font-size（例如乘以event.transform.k），否则放大后文字会糊成一片
最易忽略的是：当节点有图片或 HTML 标签（如用 CSS2DRenderer）时，文本元素必须放在同一层级的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
