D3学习手记 - 02 - 数据绑定前一篇D3学习手记-01-初探

前一篇D3学习手记-01-初探，概括了D3的特点，设置了25号代码盒子，作为D3学习、测试的模板。
这篇手记，重点研读D3的核心概念，数据绑定 Data Binding 。
本篇代码的代码盒子编号为36号。在电脑上访问https://daima.co/36
什么是数据数据是个十分宽泛的概念，在D3的语境里，数据有这个几层含义：

具有一定的结构
有数据源和获取的方法
具有一定含义，可以被解读

数据源可以是文件、数据库、或者数据查询API 。
当然，为了方便学习、测试，也可以直接在代码中定义数据，例如：
const dataset = [{name: '张三',age: 24},{name: '李四',age: 21}]什么是数据绑定数据绑定，可以说是D3最独特、也是最重要的一个概念，需要反复咀嚼、多次练习才能理解、掌握。
数据可视化说白了，就是将数据映射到视觉效果。数据进来、视觉效果出去。比如24岁，可能以长度为240个像素、宽为8个像素、颜色为蓝色的条形图表示。如何映射，由开发者、或者可视化的设计者决定。
D3通过将数据绑定到DOM元素。绑定将数据与一个或多个DOM元素相关联，可以通过这种关联双向操作DOM和数据。
D3的DOM选择器数据绑定，要有数据，也要有DOM元素。 D3也有一套自己的DOM选择器API 。跟jQuery类似，也是通过CSS选择器来选择DOM元素。
JavaScript代码

// 设置所有.app-user 元素的颜色// 见 示例1.htmld3.select('.app-user-list').selectAll('.app-user').style('color', 'blue');

HTML

张三
李四

输出效果：

文章插图
D3的数据选择数据选择是D3 API的核心。数据选择实际上是一组DOM选择与一组数据选择的差（Diff）。下面的例子选择一组DOM元素，和数据进行绑定和匹配。

//HTML:////////
////
const users = [{id: 1,name: '张三',role: 'student'}, {id: 2,name: '李四',role: 'student'}, {id: 3,name: '王五',role: 'teacher'}]const selection = d3.select('ul.app-user-list').selectAll('li.app-user').data(users)// 打印输出 "2"console.log(selection.size())

您可以自己创建一个页面实验下。
DOM选择器最终通过.data实现数据选择与绑定，最后的结果可以理解为DOM状态与数据状态的选择的一个比较差(diff) ，有三种结果：

更新选择：现有的DOM选择与数据选择匹配的部分
输入选择：数据选择存在但已有的DOM选择中不存在的虚拟、或称占位DOM元素
移除选择：现有的DOM选择与数据不匹配的部分

更新选择顾名思义，更新选择更新已有匹配元素。
看一段代码：

// 设置选择的元素的文字内容 ， 根据对应数据 ， 设置颜色值selection.text(d => d.name).style('color', d => (d.role === 'student' ? 'blue' : 'red'));

完整代码：

//HTML:////////
////
const users = [{id: 1,name: '张三',role: 'student'}, {id: 2,name: '李四',role: 'student'}, {id: 3,name: '王五',role: 'teacher'}]const selection = d3.select('ul.app-user-list').selectAll('li.app-user').data(users)// 打印输出 "2"console.log(selection.size())//设置选择的元素的内容和颜色selection.text(d => d.name).style('color', d => (d.role === 'student' ? 'blue' : 'red'));

见36号盒子的‵更新选择.html`页面。
输出结果：

文章插图
输入选择输入选择指的是输入新的内容的选择(selection) 。既然还没有内容，所以输入选择选择的是虚拟或称为占位选择的DOM元素，需要通过DOM操作，填充实际的内容。
看一段代码：

//HTML://////李梅////
//韩雷雷////
const users = [{id: 1,name: '张三',role: 'student'}, {id: 2,name: '李四',role: 'student'}, {id: 3,name: '王五',role: 'teacher'}]const enterUsers = d3.select('ul.app-user-list').selectAll('li.app-user').data(users).enter();// 控制台输出 1// 因为数据选择有3个 ， 而DOM选择有两个 ， 通过enter ， 产生数量为1的输入选择console.log(enterUsers.size());// 添加新元素 ， 设置类名、文字内容和颜色enterUsers.append('li').attr('class', 'app-user').text(d => d.name).style('color', d => (d.role === 'teacher' ? 'red' : 'blue'))

输出效果：

文章插图