Home

D3 (Data-Driven Documents 或者叫D3.js)是一个基于web标准的JavaScript可视化库。D3可以借助SVG,Canvas以及HTML将你的数据生动的展现出来。D3结合了强大的可视化交互技术以及数据驱动DOM的技术结合起来，让你可以借助于现代浏览器的强大功能自由的对数据进行可视化。

安装

如果使用npm，则可以通过npm install d3来安装。如果使用 Yarn 则通过 yarn add d3 来安装. 此外还可以下载最新版，最新版构建支持 AMD、CommonJS 以及 vanilla 环境。你也可以直接从 d3js.org, CDNJS, 或者 unpkg 加载。比如:

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

压缩版:

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

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

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

如果要使用某个固定的版本，则考虑 CNDJS 或 unpkg

支持环境

D3 5+ 支持最新浏览器，比如 Chrome，Edge，Firefox 以及 Safari。D3 4以及之的版本支持 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";

如果你使用打包工具，则确保已经配置好正确的入口，可以参考 resolve.mainFields

本地开发

由于浏览器的安全限制，不能直接读取本地文件。在本地开发的时候，必须要运行一个服务器环境而不是使用file://, 推荐使用Nodejs的http-server，安装方法:

npm install -g http-server

运行:

http-server & 

然后会在当前目录启动一个 http://localhost:8080 的服务。