D3它能提供什么？【上】

在上一篇“D3究竟是什么？”中，我们把D3比作画笔，这次我们说说这支画笔能为你提供什么，这也是D3最核心的内容。

能力

在D3的官方说明中已经提到，它主要是为你提供现代浏览器所支持的全部功能，而且不用引入什么专有框架。这些功能其实就是可以使用HTML、SVG和CSS（v4已经可以支持Canvas）来绘制和控制图表，让其更加生动。这些是显而易见的，但往往越简单、越显而易见的东西却越容易被忽视。所以我们现在应该记住，只要我们在使用D3.js，我们就可以使用任何浏览器所支持的功能（HTML、SVG、CSS以及Canvas）来展现我们想要的图表。
换句话说就是D3为我们提供了操作DOM的功能，即增加、修改、删除。这些功能与jQuery十分相似，如果你用过jQuery，那么绝对不会对它陌生。我们在页面中引入D3的js文件（下载地址https://github.com/d3/d3/releases，文章所说内容均为v4版本）后，就可以使用全局变量d3来访问D3的所有内容。下面我们来具体介绍一下比较核心的操作DOM的API。

d3.selection

首先说一下D3里很重要的一个东西，它就是D3的选择--d3.selection。这个选择是个名词（并不是绝对的名词，也可以当“动词”用），你可以把它当成一个类，D3所有操作DOM的API几乎都是它的。它是对DOM元素的一种再包装，可以让你方便的使用其提供的方法进行操作，就好像使用jQuery一样。当我们需要操作DOM时（这也是使用D3最主要的工作内容），首先必须要把我们需要操作的DOM元素“变成”d3.selection对象。方法很简单，只要使用d3.select()或d3.selectAll()方法即可。顾名思义，就是需要先让D3选中你要操作的元素。

// 选择第一个符合条件的dom元素
var selection = d3.select(selector);
// 选择所有符合条件的dom元素
var multiSelection = d3.selectAll(selector);

selector：一个css选择器字符串，只要是符合W3C标准的选择器D3都支持。如div表示div元素，.node表示类名中含有node的所有元素，div.node表示类名中含有node的div元素

d3.select()的selector参数还可以是一个DOM元素对象，这种使用方式非常有用，在后面的文章中会讲到。这两个方法查找元素的范围是整个document。

d3.select()与d3.selectAll()返回的结果都是d3.selection对象--即使没有符合条件的元素，也会返回一个空的selection。它们两个的区别之一在上面代码的注释里已经说明了，它们还有一个非常重要的区别，这里先不说，留待下一篇再讲。

d3.selection同样有select()与selectAll()方法，它们是在自己的元素中进行查找，比如d3.selectAll('div.node').select(':last-child')

添加

添加元素有两个方法，一个是

selection.append()

d3-append.png

/**
 * 为selection里的每个元素添加指定的元素作为其最后一个子元素，
 * 并返回由新元素组成的新selection.
 */
var newSelection = selection.append(type)

type：可以是字符串，也可以是函数。当它是字符串时，必须是某类元素的名字，如div、p等；当它是函数时，这个函数必须返回一个DOM元素实例。

例如我们需要在所有的div中添加一个span元素：

var spanSelection = d3.selectAll('div').append('span');

或者

var spanSelection = d3.selectAll('div').append(function(){ 
    return document.createElement('span')
});

另一个添加元素的方法是

selection.insert()

d3-insert.png

/**
 *  在selection中的每个元素里插入一个新元素，
 *  新元素会放到`before`指定的元素前面
 */
var newSelection = selection.insert(type, [before]);

type：与selection.append()方法的type参数一样
before：一个css选择器，新元素会被插入到匹配它的第一个元素之前
before的默认值是null，当它是null时insert()的结果与append()一样。

修改

在操作DOM的API中，最常用的是修改DOM的属性--元素标签里可用的属性，以及修改style的内容--即css。

selection.attr()

/**
 * 设置或获得属性值
 */
selection.attr(name, [value])

name：属性名
value：属性值，可以是数字、字符串等常量值，也可以是函数，当它是null时删除属性
当指定value时，设置属性值并返回当前selection；当不指定value时，返回selection中第一个元素的属性的当前值。如果value是一个函数，会使用该函数的返回值设置属性。

selection.style

/**
 * 设置或获取样式的值
 */
selection.style(name[, value[, priority]])

name：样式的属性名，如position、display等
value：样式的值，可以是数字、字符串等常量值，也可以是函数，当它是null时会移除属性--不是设置为空，而是把属性删除掉
priority：优先级，只能是null或字符串important，important即表示css规则中的!important

其他修改DOM的方法还有：

selection.classed(names[, value])：增加、获取或删除CSS类名
selection.text([value])：设置或获取文本内容
还有其他一些方法，在这里就不一一列出了，大家可以到官方文档（https://github.com/d3/d3/blob/master/API.md）查看。

删除

把DOM元素从document中删除掉，只有一个方法

selection.remove()

从document中删除selection里的所有DOM元素并返回当前selection，这时的selection是空的

小结

今天介绍了如何使用D3操作DOM元素，这是D3中非常基础且核心的内容，而且非常简单易于掌握。下一篇我们会介绍D3最核心的内容--数据驱动。
我在codepen上有一个简单的示例，有兴趣的朋友可以在浏览器中看一下：
https://codepen.io/guofei0723/pen/KqYOwp/left

欢迎大家关注我的微信公众号

var_web