D3.js 学习 - 1 - D3基本使用 （d3-selection 选择集）
D3 简介
D3 是一个 Javascript 库，用于创建数据可视化图形，全称 Data-Driven Documents 也就是数据驱动文档，文档指的就是基于 web 的文档，代表可以在浏览器中展示的一切，包括 SVG 以及 一般的 HTML ， D3扮演的是一个驱动程序的角色，联系着数据和文档
与 ECharts 图表相比，D3.js 不会生成事先定义好的图表，而是给你提供一些方法用来生成带数据的标签，绑定可视化的属性，如何制作图表由你自己来定义，D3.js 还提供很多数据处理的方法，用来生成可以更好的显示的数据模型。总的来说 ECharts 等可以提供更方便的图表组件，满足大部分的需求，D3.js 可以提供更丰富的自定义功能，适合定制化。
学习D3.js 更多的时候是学习它如何加载、绑定数据、数据处理、变换和过渡等这些方法的过程，官方文档的 API 非常的多，但很多都不是常用的，而且当前 D3.js 版本为 v5.5.0, 网上很多教程却都是针对 v3.x.x 版本的， D3.js 在 v4.x.x 开始 API 有了很大的不同 v5.5.0 API 与 v4.x.x 基本一致(更改的是将一些将回调转换为 promise )，于是，接下来的学习会将主要的经常被用到的 API 做下总结，然后结合实际的图表案例制作，学习其他 API ，使用的版本是最新的 v5.5.0 因此，学习过程中需要借助 这篇文章 来查询 v3.x.x 与 v4.x.x 的差异。
一些概念
1. 数据
数据就是结构化的信息，反映某些事实，可以是文本格式、二进制格式、图像、音视频、流等，但是对于 web 和 D3,js 来讲，更多的是使用文本数据
2. 链式语法
D3.js 用了一种与 jQuery 一样的 链式语法，这样通过
.就把多个操作链接起来，执行逻辑上更加清晰，链式语法的关键就是每个操作函数都有返回值，这个返回值可以执行当前操作的对象，也可以是其他对象，在 D3.js 中要注意.append('path')方法的返回值是新创建的元素对象，而不是调用这个方法的元素对象
常用 d3-selection 选择集 api
d3-selection 是 D3.js 的一系列选择集 API，这些方法都有返回值，有的返回的是当前的选择集，有的则返回新的选择集。
1..select() 选取符合条件的第一个元素，返回选取的元素
select() 方法的参数是一个 css 选择器，返回的是符合选择器的第一个元素，如果没有元素被选中则返回空集
select() 方法的参数除了是字符串外，也可以是一个指定节点的引用，例如事件监听函数中的this d
d3.select('#container')
d3.selectAll('p').on('click', function () {
d3.select(this).style('color', 'red')
})除了 d3 对象外，选择集也可以调用
select()方法，也就是在当前选择集下边继续选择元素，这个时候除了传入选择器字符串外，还可以传入一个函数, 这个函数中的this 表示当前的元素，函数会被传入三个参数 d: 元素数据 i: 元素索引 nodes 元素集
// 不能用 () => {} 否则 this 指向 window
d3.selectAll('p').select(function (d, i, nodes) {
console.log(this, d, i, nodes);
console.log(this === nodes[i]); // true
return this;
})2. .selectAll() 选取符合条件的所有元素
用来选择符合条件的所有元素，元素顺序按照其在文档中的顺序排列，如果没有元素则返回空集，与
select()一样参数也可以是节点数组除了 d3 对象外，选择集也可以调用
selectAll()方法，意为进一步选择其所有符合条件的后代元素
d3.selectAll('p').selectAll('span').selectAll(function (d, i, nodes) {
console.log(d, i, nodes);
})3. .filter() 过滤选择集
过滤并返回新的选择集，参数可以是字符串或者函数
d3.selectAll('p').filter('.none').style('color', 'red')4. .append() 添加元素 返回值是添加的元素对象
append() 方法用来添加新元素，参数就是新元素的标签名，他的返回值也是新添加的这个元素，参数还可以是一个函数 提供 d, i, nodes 三个参数，需要返回DOM元素
d3.select('#container')
.append('div')指定的标签名可能需要包含命名空间前缀 比如
svg:text指定命名空间，如果指定标签名的命名空间是已知的则可以省略
5. .insert() 插入元素到选择集中每个选中的元素前部
有两个参数，第一个参数定义要插入的元素标签名，第二个定义了一个选择器，指定在那个元素前添加
d3.select('#container')
.append('p')
.text('blue')
.style('color', 'blue')
.append('mark')
.text('mark')
.classed('blue', true);
d3.select('#container')
.selectAll('p')
.insert('span', '.blue') // 被插入到 类名为 blue 的 mark 标签前
.text('嘻嘻嘻嘻嘻')
6. .remove() 移除元素
移除当前选择集
d3.select('.blue')
.remove()7. .clone() 克隆当前选择集并添加到当前选择集后边
有一个可选参数 deep 表示是否 将所选元素的子元素页克隆了
d3.select('#container')
.append('p')
.text('blue')
.style('color', 'blue')
.append('mark')
.text('mark')
.classed('blue', true)
.clone(true)8. .text() 添加文本
参数是一段文本字符串或者是动态更新的函数，提供 d, i, nodes 三个参数，返回值即为文本值, 没有参数时则返回选择集第一个元素的文本值
d3.select('#container')
.append('div')
.text('this is div')9. .attr() 给元素添加属性 返回添加属性的元素
有两个参数 分别是 属性名和属性值，表示设置属性，如果参数只有属性名则表示获取属性值
d3.select('#container')
.append('div')
.attr('id', 'box')
.attr('id'); // box属性值也可以是一个函数，接受 d: 数据 i: 索引 nodes 组节点 三个参数，函数中 this 指向当前元素，函数返回值就是属性值，设置为 null 会将其移除
d3.select('#container')
.selectAll('p')
.data(data)
.enter()
.append('p')
.text((d, i) => `index: ${i}; org: ${d.org}; value: ${d.value};`)
.append('span')
.attr('class', 'to')
.attr('class', function (d, i, nodes) {
console.log(d, i, nodes, this);
return this.className;
})10. .classed() 添加或者删除类名
classed() 有两个参数，第一个参数是一个或多个类名用空格链接的字符串，表示要操作的类名，第二个参数可以是一个布尔值或者返回值为布尔值的函数，同样获得 d, i, nodes 三个参数
用来判断操作的类名是添加(true)还是删除(false)
d3.select('#container')
.selectAll('p')
.data(data)
.enter()
.append('p')
.text((d, i) => `index: ${i}; org: ${d.org}; value: ${d.value};`)
.append('span')
.attr('class', 'to')
.attr('class', 'post')
.classed('to get', false)
.attr('class', function () {
console.log(this); // 只剩 post class
return this.className;
})11. .style() 给元素添加样式
两个参数，样式名和样式值，表示设置样式，如果参数只有 样式名，表示获取指定的样式值
注意对于SVG 元素设置 style 的属性还是要 加上单位的，因为有些浏览器不支持默认单位
d3.select('#container')
.append('p')
.attr('class', 'blusse')
.text('blue')
.style('color', 'blue')
.style('color'); // blue12. .data() 将数据绑定到元素上
将指定数组的数据 data 与已经选中的元素进行绑定并返回一个新的选择集，新的选择集使用 update 表示：此时数据已经成功与元素绑定，并且定义了 enter 和 exit 方法用来返回需要加入元素和移除元素的选择集，参数 data 可以是一个数组，也可以是一个返回数组的函数
后续的操作如果有需要计算的属性值，就可以将属性值设置为有返回值的函数，这个函数会被传入参数 d 代表这个元素被分配的数据
var matrix = [
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907]
];
const p = d3.select('#container')
.selectAll('p')
.data(matrix)
.enter()
.append('p')
.text((d, i) => `index: ${i}; d:`)
p.selectAll('span')
.data(function (d, i, nodes) {
console.log(d, i); // 这个时候 d 是 matrix 的每一行 [11975, 5871, 8916, 2868]
return d
})
.enter()
.append('span')
.text(d => '--' + d + '--')data() 方法的第二个参数 key 函数，用来指定第几个数据被分配给第几个索引的元素，返回值即为 标识，代替索引
d3.select('#container')
.selectAll('p')
.data(data, d => d.id)13. .enter() 返回没有 DOM 节点的占位节点选择集
在 enter() 之前调用 data() 传入数据后再调用 enter() 方法，可以生成当前没有与 data 数据对应的 DOM 的占位节点，通常用来在数据比节点多的时候创建缺失的节点
const oldP = d3.select('#container')
.selectAll('p')
.data(matrix)
.text((d, i) => `old index: ${i}; d:`)
console.log(oldP);
const p = oldP.enter() // enter() 后 append 的元素操作的仅仅是新添加的元素，旧的元素不会被操作
.append('p')
.text((d, i) => `new index: ${i}; d:`)14. .exit() 返回没有对应数据的，曾经存在的DOM节点选择集
exit 选择集通常用来移除多余的元素
const data = [
{name: 'xxx1', age: 19, id: 123},
{name: 'xxx2', age: 21, id: 124},
{name: 'xxx3', age: 34, id: 125},
{name: 'xx4x', age: 12, id: 126},
{name: 'xxx5', age: 1, id: 127}
];
d3.select('#container')
.selectAll('p')
.data(data, d => d.id)
.enter()
.append('p')
.text((d, i) => `F index: ${i}; d: ${JSON.stringify(d)}`)
const newData = [
{name: 'xxx2', age: 21, id: 124},
{name: 'xx4x', age: 80, id: 126}, // 这里实际修改了数据，但是是否更新的标准是 key(id) 是否一致，所以旧的没有被更新
{name: 'xxx7', age: 212, id: 129},
{name: 'xx48', age: 122, id: 128},
];
// 按照新数据重新渲染
const selectP = d3.select('#container')
.selectAll('p')
.data(newData, d => d.id); // 指定 按照 key 索引，这样旧的数据 key 没有对应上的就会被清除到 exit 的集合
// 将新的数据补上
selectP.enter()
.append('p')
.text((d, i) => `S index: ${i}; d: ${JSON.stringify(d)}`);
// 清除不用的数据
selectP.exit().remove();15. .datum() 获取或者 设置每个选中元素上绑定的数据
与
data()方法不同，这个方法不会进行数据链式计算，不影响索引，不影响 enter 和 exit 选择集，参数为要设置的值，或者一个函数，返回要设置的值
// 按照新数据重新渲染
const selectP = d3.select('#container')
.selectAll('p')
.data(newData, d => d.id); // 指定 按照 key 索引，这样旧的数据 key 没有对应上的就会被清除到 exit 的集合
// 将新的数据补上
selectP.enter()
.append('p')
.datum((d, i) => `name: ${d.name}`)
.text((d, i) => `S index: ${i}; d: ${JSON.stringify(d)}`)
// 清除不用的数据
selectP.exit().remove();d3-selection 选择集的事件
为了交互，选择集允许监听和分派事件
1. .on(type, listener, capture) 添加事件监听器
- 为每个选中元素添加或者移除指定的事件监听器（浏览器支持的DOM事件都可用）
- listener 设置为 null 则监听器移除
- 同一个元素上注册同一个事件的监听函数会被覆盖
- 同一个元素注册同一个事件的监听器，可以在事件名后通过
.指定分类，这样就不会被覆盖了 - capture 是个布尔值，表示是否启动事件捕获
d3.select('#container')
.selectAll('p')
.on('click.foo', function (d) {
console.log('foo click', d);
})
.on('click.bar', function (d) {
console.log('bar click', d);
})
.on('click.remove', function (d) {
console.log('remove click', d);
})
.on('click.remove', null)2. d3.touches(container[, touches]) 返回触摸事件的坐标
返回触摸事件相对于 container 的坐标 container 是一个DOM元素
d3.select('#container')
.selectAll('p')
.on('touchstart', function (d) {
const touches = d3.touches(document.getElementById('container')); // [Array(2)]
console.log(touches)
})定制化的控制流
1. .each(function)
为每个选中的元素依次调用指定的 function ，将会传入 d, i, nodes this指向当前DOM 元素
d3.select('#container')
.selectAll('p')
.each(function (d, i) {
console.log(d, i)
})2. .call(function, arguments)
调用一个指定函数，函数的第一个参数是当前的选择集，其余参数就是 arguments
d3.select('#container')
.selectAll('p')
.call(function (selection, a, b) {
selection.append('span')
.text(a + b);
}, 'aaa', 'bbb')3. .empty() 返回选择集是否为空
4. .nodes() 返回选择集中的元素数组
5. .size() 返回选择集中的元素个数
const empty = d3.select('#container')
.selectAll('div')
.empty()
console.log(empty)
const nodes = d3.select('#container')
.selectAll('p')
.nodes()
console.log(nodes)
const size = d3.select('#container')
.selectAll('p')
.size()
console.log(size)