Chart.js适合标准图表和简单交互，D3.js适合高度定制和复杂交互；前者配置简单、上手快，后者控制力强但学习成本高，团队协作时需考虑成员经验。
Chart.js 适合快速出图、业务报表、管理后台；D3.js 适合高度定制、交互复杂、需要逐元素控制的可视化场景。选错库不光写得累，后期改起来也痛苦。
Chart.js 什么时候够用？
你只需要柱状图、折线图、饼图、雷达图等标准图表，数据结构是数组+对象（比如 [{x: 'Jan', y: 12}, {x: 'Feb', y: 19}]），且样式调整在 options 配置里能搞定——Chart.js 就是正解。
常见卡点：
- 想让某个柱子点击后跳转页面？加
onClick回调就行，不用碰 DOM - 要导出 PNG？
chart.toBase64Image()直接拿 canvas 数据 - 响应式失效？确认容器有明确宽高（比如
style="width: 100%; height: 400px"），别只靠responsive: true - 多 Y 轴？用
scales.yAxes[0].position: 'left'和yAxes[1].position: 'right'配两个轴
D3.js 什么时候必须上？
你需要画桑基图、力导向图、地理热力图、自定义路径动画，或者图表里每个圆/线/文字都要绑定独立事件、动态更新、拖拽重排——这时候 Chart.js 的封装反而成了枷锁，D3.js 的底层控制力才是关键。
立即学习“Java免费学习笔记（深入）”；
典型信号：
- 数据格式不是“图表库友好型”，比如嵌套 JSON 或拓扑关系数据（
{nodes: [...], links: [...]}） - 要实现“鼠标悬停时，相邻节点高亮 + 连线变粗 + 文字浮现”这种链式交互
- 图表需随滚动/缩放实时重绘（比如地图缩放时点聚合）
- 已有 SVG 基础设施，想复用
<g></g>分组、<clippath></clippath>裁剪等原生能力
性能和学习成本的真实差距
Chart.js 初始化快、体积小（压缩后约 70KB），API 简单，查文档 10 分钟就能跑通第一个折线图。D3.js 核心仅 10KB，但真正难的是数据映射逻辑：selection.data().enter().append() 这套机制容易写错，尤其当数据增删频繁时，key 函数漏写会导致 DOM 错乱。
实操建议：
- 先用 Chart.js 搭骨架，如果发现反复 patch
plugins或 hackafterDraw钩子，就是该切 D3 的信号 - D3 别从零写，优先用
d3-sankey、d3-force这类模块化子库，避免重复造轮子 - 两者不互斥：可用 D3 渲染复杂部分（如自定义图例），其余用 Chart.js，通过
chart.canvas.parentNode插入同一容器
一个容易被忽略的现实问题
团队协作时，Chart.js 的配置项写法统一，新人接手容易理解；而 D3.js 项目里常出现“同一功能五种写法”，比如更新数据时有人用 merge()，有人手动 remove() 再 append()，时间一长维护成本飙升。选型前先看团队里有没有人真正用 D3 写过上线项目，比看文档页数更管用。
