d3 update enter exit
d3 update enter exit的区别
- update:当元素和数据正好一一对应(绑定数组长度和对应元素个数)直接操作text,style等等即可(其实没有这个函数,说这个只是为了区分刚好匹配的情况)
- enter:当元素小于数组长度时(绑定数量>对应元素数量),通常要添加元素
- exit:当元素大于数组长度时(绑定数量<对应元素数量),通常要删除元素
总结一下,enter是dom小于数据的情况,enter.appnd插入dom。exit是dom大于数据的情况,你可以选择exit.append插入dom,也可以选择exit.remove删除多余的dom,使之与数据个数匹配,所以elems.exit()拿到的是多余的dom。这些操作都是为了dom元素个数能匹配数组长度。
1 先看下3个元素5个数据的情况
<p>hello world 1</p>
<p>hello world 2</p>
<p>hello world 3</p>
//5个数据添加到三个元素上面
var dataset = [3,6,9,12,15];
var p = d3.select('body').selectAll('p');
console.log(p);
//绑定数据源
var elems = p.data(dataset)
elems.text((d,i)=>{
//数据5条,标签只有三个,那么只绑定三个
console.log(d,i)// 3 6 9
return d;//3 6 9
})
2 enter 添加小于数据个数的DOM元素个数
比如dom有3个,但是dataset长度是5
现在把dom由3个变成5个,就用enter
let datalist = [1,2,3,4,5]
let elems = d3.selectAll('p').data(datalist)
// 用enter填充数据长度超出DOM部分,插入DOM
var enter = elems.enter()
enter.append('p').text(function(d){
return "enter"+d;
/*
3
6
9
enter12
enter15
*/
})
3 exit 添加或删除大于数据个数的DOM个数,拿到的是多于数据个数的DOM
现在dom有3个,但是dataset长度只有一个,要填充后2个dom的内容,可以用exit.text,
要删除后2个dom,可以用用exit.remove()
//exit
let datalist1 = [11]
let doms = d3.selectAll('p').data(datalist1)
//可以用来改变dom的内容,exit拿到的是dom数量-数组长度的数量,在这里是后两个dom
let exit = doms.exit()
exit.text(() => {
return "d"
})
//但更多的是用于删除超过数据长度的dom
exit.remove()