D3.js
开源的 JavaScript 数据可视化库,用数据绑定 DOM 做选择与过渡,配比例尺、坐标轴、地理投影和力导向等布局,适合需要完全控制图形细节的前端开发者与数据记者手写定制图表。
D3.js 是一个跑在浏览器里的 JavaScript 库,用来把数据变成图形。它不提供现成的图表模板,而是把数据和网页元素绑在一起:你写代码决定每个数据点对应哪个 SVG 元素、放在什么位置、用什么颜色,所以能做出现成图表库做不出的定制可视化。官网把它概括为「The JavaScript library for bespoke data visualization」。
主要功能
核心是选择集与过渡:基于数据创建、更新、动画化 DOM,不经过虚拟 DOM。围绕它有一整套配套模块——比例尺和坐标轴负责把抽象数值映射成位置、大小、颜色;形状模块画弧、面积、曲线、折线、连线、饼图、堆叠、符号;交互模块提供平移、缩放、刷选、拖拽等可复用行为。
布局算法覆盖矩形树图、树、力导向图、Voronoi、等高线、和弦图、圆堆积;地理部分提供大量球面投影,支持任意视角、自适应采样和灵活裁剪。此外还有 CSV 解析、本地化日期解析与格式化、色彩空间、日历计算和统计等工具函数。
适合谁
适合需要完全控制图形细节的前端开发者、数据记者和科研可视化作者。如果只是要快速出一张常规图表,官方团队另做了基于 D3 的高层 API Observable Plot,上手更省事。
费用与限制
D3 本身以 ISC 许可证开源,代码托管在 GitHub,页面显示约 113.9k 星,当前版本 7.9.2。它由 Observable 开发维护,Observable 平台另有付费方案,但用 D3 库本身不需要付费。使用门槛在于要会 JavaScript 和 SVG,学习曲线比封装好的图表库陡。