这是一篇 D3的入门概述，目的是为了理清对D3的认识，也希望能帮助大家入门。

1. D3是什么？

D3（Data-Driven Document）翻译成中文“数据驱动文档”，是一个基于数据操作 DOM 的Javascript库。理解起来，D3 跟 jQuery 很像，不过D3是面向数据可视化的，数据驱动操作DOM；而 jQuery 是面向 web 开发的，直接操作 DOM。

D3 是 javaScript 库，不是像 Echarts、HighCharts 等各种 charts 那样的 javaScript 图表库，其设计理念是把数据映射到视觉元素（形状、长度、方向、角度、颜色、面积、文本等）并通过视觉元素的组合来进行数据可视化（我自己理解的）。因此，D3 更加灵活，更加适用于创建定制化的交互式数据可视化。阿里的 G2 也借鉴了D3 的这个思想，G2 也是有很大潜力的。

因为，D3 没有引入新的视觉展现形式，它在图形方面的词汇直接来自于 web 标准（HTML、CSS、SVG、Canvas)。所以，无论浏览器怎么迭代更新，D3 都不会过时。业界称 D3 为数据可视化库王者，最强大的数据可视化 js 库。

学习 D3，除了对 D3 API 的学习，web 相关的 HTML、CSS、JavaScript、SVG、Canvas 知识以及数据可视化理论的知识也是需要学习的。当然，你可以边学 D3，边补充这些方面的知识。

2. 安装 D3

引入D3 最简单的方法，通过 html 里的script标签引入外部d3脚本文件。可以使用外部链接，也可以把d3.js下载到本地再引入。

使用外部链接 <script src="https://d3js.org/d3.v5.min.js" />

本地引入 <script src="./d3.v5.min.js" /> //src属性里写d3.js本地路径

d3.min.js 是 d3.js 的压缩版本，文件更小，加载速度更快，但是功能完全没有打折。

如果需要读取外部文件（csv、json 或者 xml），需要搭建一个服务器环境。如果你安装过python3，可以启用其自带的简易服务程序。python -m http.server一条命令就搞定了。你也可以去Apache官网（http://httpd.apache.org/）下载安装Apache Http Server。

3. D3对象

引入 d3.js 后，就可以获得要使用的 "d3" 对象了。D3 对象类似 jQuery 中的 “$”对象，采用了同样的链式语法。就是说，每次打点调用 d3 提供的函数方法，都会返回一个 d3 对象，这样可以继续调用 d3 的其他函数方法。举个例子:

d3.select('body')
.append('svg')
.attr('width',500)
.attr('height',500)

这行代码的意思是：选择 body 标签，添加 svg 元素，设置 svg 元素的宽度和高度为 500。

习惯了这种链式语法，你会发现用这种语法来创建数据可视化非常顺手，一骑绝尘。下面这张图很好的呈现了 D3 对象的组成。

4. 选择和操作

D3 选择元素提供了两个函数：select 和 selectAll。

select 返回css选择器所匹配的第一个元素。

selectAll 返回css选择器匹配的所有元素。

选择元素后可以操作元素，操作元素主要分为增加 ( append )、插入 ( insert )、删除元素 ( remove ) 和设置获取元素属性 ( attr, style )。下面用一个例子展示 D3 选择和操作元素，便于理解，大家可以自己逐行添加运行。

运行最终结果：

5. 数据绑定

数据绑定是将数据绑定到 DOM 元素上，这是 D3 最大的特色，也是 D3 的设计哲学。D3 中数据绑定提供了 datum() 和data()两个函数。

datum(value) 选择集中的每一个元素绑定相同的数据value。

这个方法不会进行数据绑定的计算(update、enter、exit)，只能在现有的元素上绑定数据。如果 value 是数组会自动转成字符串。

data([value]) 选择集中的每一个元素分别绑定数组 value 中的一项。

便于理解，还是用一个例子说明，大家可以自己逐行添加运行。

运行最终结果：

运行这个例子会发现，数据绑定的计算 (update、enter、exit) 不能影响datum操作。

6. 比例尺

比例尺是 D3 重要概念。

为什么需要比例尺？

原因在于真实数据与创建数据可视化的视觉元素大小之间存在差异。比例尺这个概念跟地图比例尺的概念是一样的，要一个画布上绘制一幅世界地图，需要按一定的比例将整个世界投射到画布上。从数学意义上来说，比例尺就是数学函数，它有三个要素：定义域、值域、对应法则。D3 根据对应法则的不同，提供了各种比例尺，有连续也有离散的。

以线性比例尺为例：

let scale = d3.scaleLinear()
           .domain([0,10000])
           .range([0,100])

其中 scaleLinear() 对应法则，domain() 是定义域，range() 是值域。

7. 坐标轴

坐标轴是绘制图表经常用到组件，比如柱形图、折线图、散点图、气泡图等。D3 中提供了专门的坐标轴模块 d3-axis，只需要几行代码就可以生成各种各样的坐标轴。一般情况下，坐标轴要与比例尺一起使用。记住这句话，离开比例尺的坐标轴就是耍流氓。

便于理解，还是用一个例子说明。

运行最终结果：

8. 画个柱形图

用上述这些知识就可以做很多图了，举个例子，做个柱形图。

9. 小结

这篇文章仅仅是对D3最基本的概念及模块做了简短概述，还有很多模块没有讲到。不过当你理解了数据绑定，会使用选择和操作、比例尺、坐标轴，加上直线、圆圈、矩形等基本图形，已经能够写出无数具有创造力的作品。

关注数据可视化技术微信公众号