选择器
d3 首先提供给了我们选择器 api 来供我们处理 dom ，用法其实是类似 jQuery 的，对 JQuery 熟悉的浏览下即可。更多的 api 见 d3 的文档 github.com/d3/d3-selec… 。
获取单个元素
d3.select('#text').text('hello world')
d3 同样提供了许多操作 dom 的方法来供我们使用，具体也是去查看文档。简单的给出几个常用的：
// 属性
d3.select('#text').attr('tag', 'p') // 设置
d3.select('#text').attr('tag') // 获取
// 类名
d3.select('#text').classed('title', true) // 添加
d3.select('#text').classed('title', false) // 删除
d3.select('#text').classed('title') // 是否存在
d3.select('#text').classed('title', () => false) // 函数返回值作为参数
// 样式
d3.select('#text').style('color') // 获取
d3.select('#text').style('color', '#fff') // 设置
d3.select('#text').style('color', () => '#fff') // 函数返回值作为参数
// 文本
d3.select('#text').text() // 获取
d3.select('#text').text('hello world') // 设置
d3.select('#text').text(() => 'hello world') // 函数返回值作为参数
// html文本
d3.select('#text').html() // 获取
d3.select('#text').html('<b>hello</b>') // 设置
d3.select('#text').html(() => '<b>hello</b>') // 函数返回值作为参数
获取多个元素
d3.selectAll('div').style('background-color', 'pink').each((data, index) => {
d3.select(this).append('p').text(i)
})
d3 在我们对元素集合进行操作时，会像 jQuery 一样帮我们自动遍历应用，d3 也支持链式调用。同样可以使用 each() 方法手动遍历操作，this也要像 jQuery 一样转化成 d3 的 selection 类型。
获取子元素
d3.select('super').select('sub').attr('name', 'son')
获取dom
let divSelection = d3.selectAll('div')
let divElement = divSelection.nodes()
绑定数据
enter-update-exit 模式
d3 的数据绑定模式被称为 enter-update-exit 模式，用到了数学中的集合知识。
如图片中所示，enter 对应 data \ elements ，update 对应 data ∩ elements ，exit 对应 elements \ data ，了解这些对应后，将数据具体化，就如下图所示
update 是已经绑定了数据的选集，enter 是数据多余的那部分的选集，exit 是元素多余的那部分的选集。
然后我们来看下 enter 和 exit 分别对应的情况：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p></p>
<p></p>
<p></p>
<script src="../d3.js"></script>
<script>
const data = [3, 6, 9, 12, 15]
// update
let update = d3.select('body').selectAll('p')
.data(data)
.text((d) => {
return 'update' + d
})
// enter
update.enter()
.append('p')
.text((d) => {
return 'enter' + d
})
</script>
</body>
</html>
页面上原有三个 p 元素，在对 p 选择集通过 data() 绑定数据后，返回已经绑定数据的元素选择集，然后我们通过 enter() 方法获取 enter 项（页面原有3个 p 元素，数据项却有5个），在获取到 enter 项后我们用 append() 为其绑定 p 元素，再为其设置文本内容。所以页面会如下图所示：
接着再看下 exit 的情况： 我们只需要把页面原有的 p 标签增加到 7 个，再添加下面的 exit 的操作代码
// exit
update.exit()
.append('p')
.text((d) => {
return 'exit ' + d
})
最终页面如下：
update 部分的处理办法一般是：更新属性值
enter 部分的处理办法一般是：添加元素后，赋予属性值
exit 部分的处理办法一般是：删除元素（remove）
