原文（持续更新）：datavis-note.benbinbin.com/article/d3/…

系列文章可以查看《数据可视化》专栏

D3 开发者创建了一个在线数据可视化开发环境 Observable，它类似于 Jupyter NoteBook，将代码分成一个个 cell，可以按 cell 执行代码，便于一边编写代码一边执行调试，将数据分析和可视化结合在一起。而且它还提供类似于 Github 的 folk 功能，可以复用祂人的代码。

💡 更多关于 Observable 的介绍可以看这篇文章。

而且它还是一个可视化作品分享社区，除了可以浏览官方制作的样例，在里面还可以找到很多其他开发者的优秀可视化作品。

参考

D3.js 全称为 Data-Driven Documents 是一个基于数据来操作 DOM 的 JS 库。

它可以将几乎任意数据绑定到 DOM 文档对象模型上，然后根据数据来计算对应 DOM 的属性值，以「驱动」DOM 变化。

💡 这和 JS 框架 Vue 有异曲同工之妙

它十分灵活，这是因为 D3 只生成图形语言中最基本、最底层的一些元素，如点、线、面，开发者可以根据所需，利用这些基本图形元素自由地搭建出各种具体的图表。

它不是一个框架，因此没有在代码编写和操作 DOM 元素的诸多限制。它遵循现有的 Web 标准，可以与现代浏览器所所提供的各种技术，如 HTML、CSS、SVG 以及 Canvas 结合使用，以更好地展示数据。

可以在这里查看官方实现的各种可视化案例：

它的运行速度很快，支持操作大数据集。使用 D3 实现各种有趣的动画，以协助讲述数据背后的故事；还可以为数据可视化提供动态交互，鼓励用户进行数据探索：

它广受欢迎，可以查看 D3 的 Github 仓库中 star 数量和自 2015 年来 D3 在 npm 中的每日下载量。官方和社区开发者提供大量针对各种场景的可视化组件，例如官方提供超过 30 多种模块，可以方便地构建各种复杂的可视化图表。

💡 D3 5+ 版本支持现代浏览器，而 D3 4 版本可以支持 IE 9+，更旧版本的 D3 可以支持更旧的浏览器。

💡 D3 由于提供了众多模块，入门上手有一定的难度而且，而且生成的都是基本的图形元素，自由度虽然很高，但搭建出完整的图表所需的代码量较大。如果希望基于数据快速生成常见的统计图表，可以使用一些封装程度更高的工具，例如 D3 团队推出的另一款工具 Observable Plot，或 另一个开源的可视化工具 Vega-Lite

有多种方法在项目中引入 D3 库

在官网或 Github 将源码下载到本地，再在项目中引入本地 JavaScript 文件

通过包管理工具，以模块形式引入项目

先在终端输入以下命令安装 D3.js 及其依赖包

在项目中导入 D3.js

通过 CDN 引入（注意引用的版本号），可以使用官网提供的源

💡 也可以使用其他服务商，如 jsDelivr、CDNJS 或 unpkg 提供的源

D3 由各模块构成，可以根据项目所需单独引入 d3 中的某些模块，比如单独使用 d3-selection:

💡 D3 也可以在 Node 和 web workers 环境中运行。但在 Node 环境中需要提供自己创建的 DOM，例如使用 JSDOM。

也可以导入多个模块，然后使用 Object.assign 将这些模块整合到名为 d3 的对象中