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


本文讲了updateenterexit,怎么样学会了吗?

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

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页