D3.js基础语法，精通D3.js，D3.js小书，第二篇

                                                                                                   第二章

      我们上篇文章讲到了数据绑定datum()、data()，相信都已经会用了，但是如果 "数组长度 ≠ 元素数量"不一致，就会带来3个选择集：update、enter、exit

//数组长度 大于 元素数量时，则说明有部分不存在的元素，即将进入可视化（enter）;
//数组长度 小于 元素数量时，则说明有部分多余的元素，即将移出可视化（exit）;
//数组长度 等于 元素数量时，则绑定数据的元素，即将被更新（update）;
 

<div id="odiv">
    <p></p>
    <p></p>
    <p></p>
</div>

//1.第一种情况 目前odiv里面有三个p,但是数组长度为6,则说明有部分不存在的元素,所以我们要添加不存在的元素
//#enter

let p = d3.select('#odiv').selectAll('p');//选中#odiv下面所有的p
let arr = [1,5,6,4,2,3];//数组
let update = p.data(arr);//给每一个元素绑定对应的数据
p.text((d,i)=>{//第一个是表数据,第二个是索引
    return d;
});
let enter = update.enter();
enter.append('p').text((d)=>d);

 

//2.第二种情况 目前odiv里面有三个p,数组长度为2,则说明有部分多余的元素,所以我们要删除多余的元素
//#exit

let p = d3.select('#odiv').selectAll('p');
let arr = [2,6];
let update = p.data(arr);
p.text((d)=>d);
let exit = update.exit();
exit.remove();

 

//3.在不知道数组长度的情况下,一般都用一下模板来解决

let arr = [10,20,30];
let p = d3.select('#odiv').selectAll('p');
//#绑定数据之后,分别获取update、enter、exit部分
let update = p.data(arr);
let enter = update.enter();
let exit = update.exit();
//#1.update部分的处理方法
    update.text(d=>d);
//#2.enter部分的处理方法
    enter.append('p')
         .text(d =>d);
//#3.exit部分的处理方法
    exit.remove();

本文讲了update、enter、exit，怎么样学会了吗？

有想一起学习D3的朋友可以加QQ群881658075，一起学习进步