D3是什么

D3是javascript函数库，用来做数据可视化的。
这里就不再介绍有关D3是什么，发展历史，有什么优势。我们在这着重讲解D3的快速入门，侧重于讲解的D3的基础和使用。
我所使用的D3.js版本是V4+。

选择集

在使用D3后，个人觉得D3简直就是SVG界的JQuery，元素的选择、DOM操作，链式调用等都是如出一辙。
元素的选择是使用D3的基础，D3.js中选择元素有两个函数：

d3.select()，选择所有指定元素中的第一个
d3.selectAll()，选择所有指定元素的全部

这两个函数返回的结果，便是选择集。

html如下

1
2
3
4
5
6
7
8

<h1>前端框架</h1>
<h2>信息</h2>
<p>react</p>
<p>vue</p>
<p>angular</p>
<div id="title"></div>
<div class="content"></div>

js如下

1
2
3
4
5
6

// 选择集
var $title = d3.select('h1');
d3.select('#title').text($title.text());
var $list = d3.selectAll('p');
d3.select('.content').text('size is ' + $list.size());
var $info = d3.select('h2');

效果如下

代码示例

绑定数据

D3有一个很独特的功能，能将数据绑定到DOM上，也就是绑定到文档上。你要是第一次接触DOM上绑定数据，肯定有很多疑问。
关于绑定数据的初衷是什么？这样做的优势是什么？D3又是怎样去实现的？带着这些问题，让我讲一个之前用JQuery完成的需求。

有一个菜单列表，假若里面有10条菜单。页面初始化渲染后，列表中有10条菜单，我们可以移除列表中若干菜单，最后列表外面有个按钮，向服务端请求说明自己还剩下哪几条菜单。
所以这里面有一个关键，就是菜单和菜单之间要能区分开，也就是每条菜单是有自己独特的标识。不管是我们在菜单列表渲染的时候加上编号也好，还是每一个菜单加上自己的ID也好，这里面的编号以及ID都可以理解为我们的数据，我们需要将数据绑定在DOM上来区分菜单，同时方便我们处理菜单。

D3将数据绑定到DOM上有两个函数，需要注意的是这两个函数都是选择集的方法。

data()，将数据分别绑定到不同的DOM上
datum()，将数据绑定到每一个DOM上

html如下

1
2
3
4
5
6
7
8
9

<h1>前端框架</h1>
<h2>信息</h2>
<p>react</p>
<p>vue</p>
<p>angular</p>
 
<div id="titleData"></div>
<div id="infoData"></div>
<div id="listData"></div>

js如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 选择集
var $title = d3.select('h1');
var $list = d3.selectAll('p');
var $info = d3.select('h2');
// 数据的绑定
var listData = ['react', 'vue', 'angular'];
var titleData = 'title';
var infoData = ['this', 'is', 'info'];
$title.datum(titleData);
$info.datum(infoData);
$list.data(listData);
// 获取数据
$title.each(function(d){
    d3.select('#titleData').text(d)
});
$info.each(function(d){
    d3.select('#infoData').text(d)
});
$list.each(function(d){
    d3.select('#listData').append('span').text(d + '   ')
});

效果如下

代码示例

总结

1、选择集合绑定数据是D3入门的基础.
2、绑定数据对于DOM的区分以及统一管理有很大的便利性。
3、要注意绑定数据的两个函数的异同。