树状图连线与节点居中不匹配的本质是SVG像素坐标系与CSS盒模型坐标系混用：CSS居中仅改变视觉位置，而SVG连线需基于getBoundingClientRect()计算的真实像素中心坐标，且须考虑border、transform及SVG坐标系转换。
树状图连接线和 HTML 元素居中对齐不匹配，本质是两类坐标系统混用：SVG/Canvas 绘制的连接线基于像素坐标，而 CSS 居中（如 margin: 0 auto 或 justify-content: center）作用于文档流盒模型——二者默认参考点不同，直接套用必然偏移。
为什么树状图节点居中了，连线却歪了
常见现象：用 D3、ECharts 或手写 SVG 渲染树状图时，节点 DOM 元素（如 <div class="node">）用 display: flex 居中了，但从父节点画出的连接线（<line> 或 <path>）起点不在节点中心，而是偏左/偏上。
- 原因在于：CSS 居中让元素**视觉中心**落在容器中间，但 SVG 连接线的坐标通常取自元素的
getBoundingClientRect()的left/top，或硬编码的x/y值，没减去元素自身宽高的一半 - 如果节点用了
transform: translate(-50%, -50%)实现居中，其getBoundingClientRect()返回的仍是原始位置，不是视觉中心 - Flex 居中后，节点的
offsetLeft/offsetTop仍以文档流起始点计算，不反映最终渲染位置
获取真实居中坐标的关键方法
要让连线精准锚定到节点视觉中心，必须拿到该中心在 SVG 坐标系下的绝对像素位置。不能依赖 CSS 计算，得靠 JS 实时测量：
- 对每个节点元素调用
element.getBoundingClientRect()，再手动计算中心：{ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 } - 若节点被包裹在缩放/平移的 SVG 容器内（如
<g transform="scale(0.8)">），需用element.getScreenCTM()转换到 SVG 坐标系（D3 中可用d3.select(node).node().getScreenCTM()） - 避免用
offsetLeft/offsetTop：它们受position: relative等影响，且不包含 transform 偏移 - 如果节点是
display: inline-block且父容器有text-align: center，需额外考虑行内布局带来的基线对齐偏差，建议统一转为display: block+margin: 0 auto
连线起点/终点怎么设才不漂移
即使拿到真实中心坐标，连线仍可能随滚动或缩放错位——因为 SVG 坐标默认相对于视口，而节点位置是相对于文档。
立即学习“前端免费学习笔记（深入）”；
- 最稳做法：把连线画在同一个 SVG 容器内，并用
viewBox控制缩放，节点 DOM 仅作占位，所有坐标用 SVG 单位统一管理 - 若必须混合 DOM + SVG（如用 div 渲染节点、svg 画线），确保 SVG 的
position与节点父容器一致（同为relative），且 SVGwidth/height与父容器完全重叠 - 连线端点不要写死
x1="100"，改用 JS 动态赋值：line.setAttribute('x1', centerX); line.setAttribute('y1', centerY); - 监听
window.resize和scroll事件重新计算坐标——但更推荐防抖后只在 resize 时更新，滚动时用position: fixed或 CSStransform避免重排
Flex 居中节点时连线错位的典型修复
假设你用 Flex 把节点居中，又用 D3 画线，结果连线总偏右 20px——大概率是节点设置了 padding 或 border，但计算中心时没剔除。
- 正确中心 X 坐标 =
rect.left + (rect.width - parseFloat(getComputedStyle(element).borderLeftWidth) - parseFloat(getComputedStyle(element).borderRightWidth)) / 2 - 更简单：用
element.querySelector('.content')获取内部无 padding/border 的内容区，再对其测距 - 如果节点含图标+文字，且文字用
line-height垂直居中，注意rect.height包含上下空白，实际内容高度可能更小 - 临时调试技巧：给节点加
outline: 1px solid red，对比连线起点是否真落在红框正中心
真正麻烦的不是“怎么居中”，而是“居中之后怎么让其他东西跟着它动”。树状图里，节点位置是动态生成的，连线必须实时绑定其几何中心——这一步漏掉任何 offset，视觉上就是一根歪掉的线。别信 CSS 表面效果，拿 getBoundingClientRect() 测，用 SVG 坐标系算，才是稳的。
