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
分类:
前端技术栈 / 数据可视化
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端