D3 简介

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

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

参考

特点

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

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

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

矩形树图 treemap
环形关系图 hierarchical edge bundling
桑基图 Sankey diagram
密度和轮廓图 density contours
力导向图 force-directed graph
各种各样的地图 map projections

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

动态条形图 Bar Chart Race
动态矩形树图 Animated Treemap
支持分级下钻交互的条形图 Hierarchical Bar Chart
支持折叠交互的树形图 Collapsible Tree
支持下钻交互的旭日图 Zoomable Sunburst
支持下钻交互的矩形树图 Zoomable Treemap
支持缩放交互的圆堆图 Zoomable Circle Packing
支持刷选区域交互的矩阵散点图 Brushable Scatterplot Matrix
支持缩放交互的面积图 Zoomable Area Chart

提示

它广受欢迎，可以查看 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 及其依赖包

bash

# for npm
npm install d3 --save

# for yarn
yarn add d3 --save

在项目中导入 D3.js

html

<script type="module">
// 导入 D3.js 的所有模块
import * as d3 from "d3";
// 使用 d3 选中页面的所有 div 元素
const div = d3.selectAll("div");
</script>

通过 CDN 引入（注意引用的版本号），可以使用官网提供的源
html
```
<script src="https://d3js.org/d3.v7.js"></script>


<script src="https://d3js.org/d3.v7.min.js"></script>
```
💡 也可以使用其他服务商，如 jsDelivr、CDNJS 或 unpkg 提供的源

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

使用 CDN 导入

html

<script src="https://d3js.org/d3-selection.v3.js"></script>

使用打包工具进行构建时

// 在项目中载入 D3 scale 模块的 scaleLinear 函数
import {scaleLinear} from "d3-scale";

提示

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

// 在 Nodejs 环境中引入 D3
const d3 = require("d3");

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

const d3 = Object.assign({},
    require("d3-format"),
    require("d3-geo"),
    require("d3-geo-projection"));

Observable

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

提示

更多关于 Observable 的介绍可以看这篇文章，关于它的工作原理可以看这篇文章。

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