绑定数据_D3学习手记 - 02 - 数据绑定

前一篇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'))

输出效果：

问题：为什么输出的第一、二项还是李梅、韩雷雷，没有变成数据里的张三、李四呢？

移除选择

顾名思义，移除选择是将DOM选择中和数据选择不匹配的部分移除。

看一段代码：

//        HTML://        

// // 李梅// // // 韩雷雷// // // 马小跳// // const users = [{ id: 1, name: '张三', role: 'student'}, { id: 2, name: '李四', role: 'student'}]const exitUsers = d3.select('ul.app-user-list') .selectAll('li.app-user') .data(users) .exit()// 移除不匹配的DOMexitUsers.remove();

输出效果：

最后

• 数据绑定是D3最重要的概念
• 数据绑定是D3最重要的概念
• 数据绑定是D3最重要的概念

重要的事情说三遍。

那么数据选择与DOM选择是如何匹配的呢？示例里的匹配很简单：按数据数组与DOM数组元素的位置。

D3当然提供其他的匹配方法，后面我开始研习时，再和大家分享。

本篇代码盒子编号为36号。在电脑上访问https://daima.co/36

原创不易，喜欢的点个赞、关注一下呗!~