SVG数据可视化需手动处理坐标系反转（如y=400−值）、viewBox缺失致缩放变形、不支持百分比定位；D3通过enter/update/exit三阶段绑定数据与DOM；tooltip需手动计算位置并防闪退，难点在于响应式更新与交互稳定性。
SVG 数据可视化不是“把数据塞进 <svg> 就完事”，它依赖你对坐标系、DOM 操作和数据映射关系的控制——没封装库时，每根柱子、每个圆点都得手动算位置、设属性、绑事件。
为什么直接写 <rect> 绑数据会错位
SVG 的 y 轴原点在左上角，y 值越大，图形越往下沉。但数据越大，我们通常希望柱子“越高”，所以必须做反转：比如画布高 400px，数据值为 80，真实 y 应该是 400 - 80 = 320，height 才是 80。
- 不反转 → 柱子从顶部往下“长”，数值越大柱子越靠下，视觉完全反直觉
- 忘记设
viewBox→ 缩放时变形，或 CSS width/height 不生效 - 用百分比写
x/y→ SVG 不支持百分比定位，只认像素值
d3.select().data().enter().append() 是怎么把数组变图形的
这不是魔法，而是 D3 把“数据项”和“DOM 元素”做了显式绑定。调用 .data(dataset) 后，D3 内部生成三个虚拟集合：enter（数据多于元素）、update（数量匹配）、exit（元素多余数据）。只有 enter 部分才真正 .append() 新节点。
- 第一次渲染：所有数据走
enter→ 创建新<circle> - 更新数据：部分数据走
update→ 复用旧节点改attr - 删掉一个数据：对应节点进
exit→ 可选.remove()或过渡隐藏 - 漏掉
.merge()→enter新增的节点不会响应后续update动画
鼠标悬停显示 tooltip 为什么总偏移或消失
原生 SVG 没有内置 tooltip，靠 title 属性最简但样式不可控；自己用 <div id="tooltip"> 定位则必须监听 mousemove 并实时计算 clientX/clientY，且要防脱标（比如快速划过多个 <rect> 时，mouseout 可能晚于下一个 mouseover）。
立即学习“前端免费学习笔记（深入）”；
- 用
title：只能纯文本，无法加单位、颜色、箭头，移动端不触发 - 用绝对定位
<div>：需在mouseover里tooltip.style.display = 'block'，mouseout里加setTimeout延迟隐藏，否则闪退 - 没阻止默认行为：右键菜单、文字选中会干扰悬停状态
- SVG 容器外层没设
position: relative→ tooltip 相对于整个页面定位，飘走
真正的难点不在“画出来”，而在“数据变时图形怎么稳、交互怎么不卡、缩放后文字和线条粗细怎么保持合理”。这些细节没有统一解法，全靠你在 viewBox、transform、getBoundingClientRect() 和事件节流之间反复调。
