2 D3 关于update enter exit
update enter exit
主要用于处理数据元素和DOM元素不匹配的情况，此API我觉得目的就是让DOM和datalist在数量级上匹配起来
- update 其实没有这个函数，只不过为了区分enter和exit而虚构出来的
- enter 数据元素个数多于DOM元素，处理的是少去的DOM部分，通常需要增加DOM元素
- exit 数据元素少于DOM元素，处理的是多出的DOM部分，通常需要删除DOM元素
enter
应用场景
比如现在datalist是个长度为5的数组，但是DOM元素只有三个
如果要让DOM元素变成5个，那么你就需要使用enter
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<p></p>
<p></p>
<p></p>
<script>
let datalist = [1,2,3,4,5]
let container = d3.selectAll('p')
.text('aaa')
.data(datalist)
//enter操作的是数量多出来的那一部分
.enter()
//添加元素
.append('p')
.text((d,i)=>d)
</script>
</body>
效果：
exit
比如现在有5个dom,但是数据长度为3，如果想删去多出的两个dom,可以用exit
<script src="https://d3js.org/d3.v5.min.js"></script>
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
// exit
let datalist = [1,2,3]
let container = d3.selectAll('p')
.text('aaa')
.data(datalist)
.exit()
//remove之后只剩三个
.remove()
</script>
</body>
update
虚构的方法，表示dom数量对应data长度，用于区分exit和enter
