Skip to content
呆子一枚 edited this page Jan 15, 2018 · 7 revisions

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

Installing

如果使用npm,则可以通过npm install 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支持“现代”浏览器,也就是除IE8及以下的浏览器。D3针对Firefox,Chrome,Safari,Opera,IE9 +,Android和iOS进行测试,D3的一部分功能能在旧版的浏览器中运行,因为D3的核心功能对浏览器的要求比较低:和 [W3C DOM](http://www.w3.org/DOM/) API。D3使用 Level 1级[Selectors API](http://www.w3.org/TR/selectors-api/),但是可以通过预先加载[Sizzle](http://sizzlejs.com/)来实现兼容。现代浏览器对[SVG](http://www.w3.org/TR/SVG/)和[CSS3 Transition](http://www.w3.org/TR/css3-transitions/) 的支持比较好。所以D3不支持更低级别的浏览器,如果你的浏览器不支持这些标准,那么祝你好运...

D3也可以运行在[Node](http://nodejs.org/) 和 [Web workers](http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html)中. 在Node环境中使用DOM的时候,必须要提供自己的DOM实现。推荐使用[JSDOM](https://github.com/tmpvar/jsdom),为了避免定义全局`document`,建议将DOM传递给d3.select或者将NodeList传递给d3.selectAll,如下:

```js
var d3 = require("d3"),
    jsdom = require("jsdom");

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

本地开发

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

npm install -g http-server

运行:

http-server & 

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

Clone this wiki locally