D3.js不是图表库而是数据驱动DOM操作工具，它不提供现成图表组件，需手动处理数据绑定、坐标映射、轴生成与动态更新。
为什么 D3.js 不是“画图表的库”，而是“操作 DOM 的数据驱动工具”
D3.js 本身不提供 BarChart() 或 LinePlot() 这类开箱即用的图表组件。它核心做的是：把数据映射到 DOM 元素（比如 <svg>、<circle>、<text>），再用 SVG/CSS/Canvas 控制呈现。这意味着你得自己写坐标计算、轴生成、过渡动画逻辑。
常见错误现象：d3.select("#chart").datum(data).enter().append("circle") 报错或没反应——大概率是漏了 .join()（v6+）或没调 .enter().append() 配合 .data()；也可能是数据没正确绑定，或 SVG 容器尺寸为 0。
- 必须显式创建
<svg>并设置width/height，D3 不自动撑开容器 -
d3.scaleLinear()和d3.scaleBand()是坐标转换关键，但不会自动画轴——得配d3.axisBottom()再调.call() - v6+ 强制使用
.join()替代.enter().append().merge()链式写法，否则更新逻辑失效
数据绑定与动态更新的三步铁律：data → enter → update → exit
D3 的响应式能力全靠这套机制：新数据进来时，自动区分“新增项”（enter）、“保留项”（update）、“删除项”（exit）。跳过任意一环，图表就无法随数据变化而正确增删元素。
典型场景：实时刷新股票价格，每秒追加一个点，同时滑动窗口只留最近 100 条。
立即学习“Java免费学习笔记（深入）”；
const line = d3.line()
.x(d => xScale(d.time))
.y(d => yScale(d.price));
<p>svg.selectAll(".price-line")
.data([priceData]) // 注意：传数组，不是原始数组
.join("path")
.attr("class", "price-line")
.attr("d", line);-
.data()的 key 函数（第二个参数）决定如何匹配新旧数据，不传则按索引比对，易出错 -
.join("tag")内部已封装 enter/update/exit，但你要负责在enter分支设初始属性，在update分支设过渡或重绘 -
exit().remove()必须显式调用，否则旧 DOM 残留，内存泄漏风险高
坐标系统与比例尺：别硬算像素，让 scale 做映射
手动写 x = (value - min) * width / (max - min) 是反模式。D3 的 d3.scaleLinear()、d3.scaleTime()、d3.scaleBand() 才是正解——它们可反向查询（scale.invert()），支持插值（.interpolate(d3.interpolateRound)），还能响应 resize 重算域（domain）。
容易踩的坑：d3.scaleBand().rangeRound([0, width]) 忘记加 Round，导致 bar 宽度出现小数像素，渲染模糊；或 timeScale.domain([new Date(2023,0,1), new Date(2023,11,31)]) 月份从 0 开始，写成 1 就错一个月。
- 时间类数据必须用
d3.timeParse()解析字符串，不能直接 new Date() 后丢给 scale - 序数型数据（如类别名）优先用
d3.scaleBand()，别用scaleOrdinal()除非你真需要离散颜色映射 - scale 的
domain务必基于当前数据动态计算（d3.extent(data, d => d.value)），而非写死
交互事件与过渡动画：selection.on() + transition() 是黄金组合
鼠标悬停高亮某根柱子、点击筛选数据、拖拽平移图表——这些都靠 selection.on("click", handler) 绑定，但要注意事件作用域和 this 指向。动画则必须用 .transition().duration(300) 包裹属性变更，否则是瞬时跳变。
性能陷阱：在 mousemove 中频繁调用 d3.pointer(event) + 重绘所有元素，卡顿明显。应节流 + 只更新 tooltip 文本和定位。
-
d3.zoom()是平移缩放核心，但它不处理数据重采样——缩放到极致时需配合d3.brush()或后端分页加载 -
.transition()后不能再链式调.attr()，必须用.attrTween()或.tween()控制中间帧 - 移动端需额外监听
touchstart/touchmove，且禁用默认滚动：event.preventDefault()
D3 的复杂性不在 API 数量，而在你必须同时理解数据结构、SVG 坐标系、DOM 生命周期和函数式编程思维。哪怕只画一个带坐标的折线图，也要亲手写 scale、axis、line 生成器、data join 和 transition——没有隐藏的“自动适配”。
