17370845950

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 基础设施，想复用 分组、 裁剪等原生能力

性能和学习成本的真实差距

Chart.js 初始化快、体积小（压缩后约 70KB），API 简单，查文档 10 分钟就能跑通第一个折线图。D3.js 核心仅 10KB，但真正难的是数据映射逻辑：selection.data().enter().append() 这套机制容易写错，尤其当数据增删频繁时，key 函数漏写会导致 DOM 错乱。

实操建议：

• 先用 Chart.js 搭骨架，如果发现反复 patch plugins 或 hack afterDraw 钩子，就是该切 D3 的信号
• D3 别从零写，优先用 d3-sankey、d3-force 这类模块化子库，避免重复造轮子
• 两者不互斥：可用 D3 渲染复杂部分（如自定义图例），其余用 Chart.js，通过 chart.canvas.parentNode 插入同一容器

一个容易被忽略的现实问题

团队协作时，Chart.js 的配置项写法统一，新人接手容易理解；而 D3.js 项目里常出现“同一功能五种写法”，比如更新数据时有人用 merge()，有人手动 remove() 再 append()，时间一长维护成本飙升。选型前先看团队里有没有人真正用 D3 写过上线项目，比看文档页数更管用。