简介

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及 HTML将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术, 让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。最新版本v5.9.7。Logo 如下图：

安装

如果使用 npm, 则可以通过 npm install d3 来安装. 此外还可以下载 最新版, 最新版支持 AMD、CommonJS 以及基础标签引入形式. 你也可以直接从 d3js.org, CDNJS, 或者 unpkg 加载. 比如:

<script src="https://d3js.org/d3.v5.js"></script>

压缩版:

<script src="https://d3js.org/d3.v5.min.js"></script>

你也可以单独使用 d3 中的某个模块, 比如单独使用 d3-selection:

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

D3基于 ES2015 modules 开发. 可以使用 Rollup, webpack 或者其他你偏爱的打包工具进行构建. 在一个符合 ES2015 的应用中导入 d3 或者 d3 的某些模块:

import {scaleLinear} from "d3-scale";

或者导入 d3 的全部功能并且设置命名空间 (这里是 d3):

import * as d3 from "d3";

在 Nodejs 环境中:

var d3 = require("d3");

你也可以导入多个模块然后将这些模块集合到 d3 对象中, 此时使用 Object.assign:

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

支持环境

D3 5+ 支持最新浏览器，比如 Chrome，Edge，Firefox 以及 Safari。D3 v4 以及之前的版本支持 IE 9 以上的版本。D3 的一部分功能能在旧版的浏览器中运行，因为 D3 的核心功能对浏览器的要求比较低。例如 d3-selection 使用 Level 1级 Selectors API，但是可以通过预先加载 Sizzle 来实现兼容。现代浏览器对 SVG 和 CSS3 Transition 的支持比较好。所以 D3 不支持更低级别的浏览器，如果你的浏览器不支持这些标准，那么对不起了，老铁。

D3 也可以运行在 Node 和 Web workers 中. 在 Node 环境中使用 DOM 的时候，必须要提供自己的 DOM 实现。推荐使用 JSDOM，为了避免定义全局 document，建议将 DOM 传递给 d3.select 或者将 NodeList 传递给 d3.selectAll, 如下：

var d3 = require("d3"),
 jsdom = require("jsdom");
var document = jsdom.jsdom(),
 svg = d3.select(document.body).append("svg");

在支持 ES 模块化 的环境中，你可以将 d3 作为一个命名空间来导入 D3 的全部功能:

import * as d3 from "d3";

如果你不想导入全部模块，则分配命名空间的时候要和 d3 进行区分:

import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";

出于这个原因，应该优先考虑 D3 模块中的原有变量名，可以按需导入：

import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";