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

见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();

输出效果：