能跑通的最小可执行D3链式调用是：d3.select("#chart").selectAll("circle").data([10,25,30]).enter().append("circle").attr("cx", (d,i)=>i*50).attr("cy", 50).attr("r", d=>d/2);，需HTML中存在<div id="chart"></div>并已引入D3库。
直接上手写一个能跑通的 d3.select() + .data() + .enter().append() 链式调用，比读任何“入门教程”都快。别的都是干扰项。
HTML 里必须先有 <svg> 或带 ID 的容器
D3 不会自动创建画布，它只操作已存在的 DOM 节点。常见错误是：写了 d3.select("body").data(data).enter().append("circle")，但页面空白——因为 <circle> 只能在 <svg> 内部渲染，浏览器直接忽略。
- 要么在 HTML 中手动写好：
<div id="chart"></div>，然后用d3.select("#chart").append("svg")创建 - 要么直接写：
<svg width="500" height="200"></svg>，再用d3.select("svg")选中 - 别对
<p>、<div>直接.append("circle")，无效且无报错
.data() 绑的是数组，不是对象；不调 .enter() 就没新元素
.data() 本身不生成任何 DOM，它只是把数据“挂”在选择集上。真正创建元素的是 .enter().append() 这一对组合。新手常卡在这步，以为绑了数据图形就出来了。
- 数据必须是数组，比如
[10, 25, 30]，不能是{a: 10, b: 25}（除非你先Object.values(obj)） -
.selectAll("circle").data(data).enter().append("circle")是标准三连，少一个环节就看不到东西 - 如果
selectAll()选中了已有元素（比如之前画过），D3 会按“更新/进入/退出”三阶段处理；首次绘制时只有“进入”阶段生效
cx、cy、r 必须手动设，且值要是数字
SVG 元素所有定位和尺寸属性默认为空或 0。不设 cx/cy，<circle> 就堆在左上角；不设 r，半径为 0，就是个看不见的点。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是：
.attr("cx", d => d.x)或.attr("cx", (d, i) => i * 50)，不能是.attr("cx", "100")（字符串可能被强制转换，但不可靠） - 注意 SVG 坐标系：原点在左上角，
y值增大 = 向下移动，和数学坐标系相反 - 如果数据是二维数组如
[[10, 20], [30, 40]]，访问要用d[0]和d[1]，不是d.x/d.y
交互和坐标映射不是可选项，是图表能用的前提
没有 .on("click", ...) 的图表是死的；没有 d3.scaleLinear() 的图表是错的——原始数据值直接当像素用，1000 的数据会让圆飞出屏幕。
-
.on("click", d => console.log(d))才有效；写成.on("click", console.log)会立即执行，而不是点击时执行 - 比例尺必须定义
.domain([min, max])和.range([0, width])，且domain必须是数字数组，["1", "2"]会导致 scale 失效 - 响应式调整时，改了
<svg>宽高，必须同步调用xScale.range([0, newWidth])并重绘，否则坐标全乱
最容易被忽略的是：D3 图表不是“写完就跑”，而是“绑定→计算→渲染→监听”四步闭环。漏掉任意一环，比如忘了设 cy 或漏了 .enter()，结果就是页面空着，控制台还一声不吭。
