d3.js是需手动实现可视化的底层框架，chart.js是开箱即用的高级图表库；二者可结合使用，但须分离渲染上下文并同步坐标系。
D3.js 和 Chart.js 完全是两类工具：一个是要你亲手“造轮子”的底层可视化框架，一个是开箱即用的高级图表库。选错就等于在画柱状图时先手写 SVG 坐标计算。
什么时候该用 Chart.js？
你只需要快速展示标准图表（折线、柱状、饼图），数据结构简单，样式不需深度定制，且项目已用 Vue 或 React ——Chart.js 的封装足够稳。
常见错误现象：chart.update() 不刷新、options.plugins.legend.display = false 写成 legend.enabled（旧版写法）、引入后报 Chart is not defined（没等 canvas 节点挂载就执行初始化）。
实操建议：
- 必须确保
<canvas></canvas>元素已存在于 DOM 中，再 new Chart() - 动态更新数据用
chart.data.labels = [...]+chart.data.datasets[0].data = [...]+chart.update()，别直接改数组引用 - 若用模块方式引入（如 ES6），要显式注册插件：
Chart.register(Title, Tooltip) - 默认响应式开启，但容器宽高为 0 时会渲染失败——给
canvas父元素设min-height: 300px
什么时候非用 D3.js 不可？
你要做力导向图、地理热力图、自定义坐标轴刻度、动画路径过渡、或把 SVG 元素和数据做细粒度绑定（比如每个 <circle></circle> 对应一个对象并监听拖拽）。
典型踩坑：d3.select('#chart').selectAll('circle').data(data).enter().append('circle') 后图形不显示——忘了设置 cx/cy/r 属性；用 d3.scaleLinear() 但输入值超出定义域，返回 NaN 导致 SVG 坐标失效。
实操建议：
- 域（domain）务必覆盖实际数据范围，可用
d3.extent(data, d => d.value)自动推导 - 选择器链别嵌套太深，
.data().enter().append().attr().merge()是标准三段式，漏掉merge()就无法更新已有元素 - 过渡动画统一用
.transition().duration(300)，避免部分元素有动画、部分没有 - 不要用
d3.json()在模块中直接 import 数据——它返回 Promise，得用await或.then()处理异步
Chart.js 和 D3.js 能一起用吗？
能，而且很常见：用 Chart.js 画主图表，用 D3.js 在 canvas 上层叠加交互提示、自定义标注或地理投影辅助线。
关键约束：Chart.js 渲染在 <canvas></canvas>，D3.js 操作 <svg></svg>，二者不能混在同一渲染上下文。必须把 svg 绝对定位盖在 canvas 上，并同步坐标系（例如用 chart.scales.x.getPixelForValue(value) 把数据值转为像素位置）。
实操要点：
- 获取 canvas 像素位置后，用
d3.select('svg').append('line')绘制，别 append 到 body - 监听
chart的onHover或onClick回调，再触发 D3 元素显隐 - Canvas 缩放时，D3 的 SVG 不会自动缩放——得监听
window.resize并重算所有位置
