D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

最新推荐文章于 2020-11-17 06:39:51 发布

dibisha7239

最新推荐文章于 2020-11-17 06:39:51 发布

阅读量131

点赞数

原文链接：http://www.cnblogs.com/cangqinglang/p/11609210.html

版权

D3.js的v5版本入门教程（第四章）

Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）

在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个绑定，但是，现在就有一个问题——数据集个数和选择集个数不匹配怎么办？这样就需要理解Update、Enter、Exit

例子一：update和enter：数组[3,6,9,12,15]绑定到三个上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为Enter。而有元素与数据对应的部分就称为Update

例子二：exit：如果数组[3]绑定到三个上，可以想象，最后两个没有可绑定的数据，那么没有数据绑定的部分就称为Exit

如下图(此图片非原创)

1、Update与Enter的使用

<body>
<p>dog</p>
<p>cat</p>
<p>pig</p>

<script>
var dataset = [3,6,9,12,15];
var p = d3.select("body")
.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var enter = update.enter();//得到enter部分
//下面检验是否真的得到
//对于update的处理
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于enter的处理
//注意，这里需要先添加足够多的<p>，然后在添加文本
var pEnter = enter.append("p")//添加足够多的<p>
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;
})
</script>
</body>

运行结果：

代码说明：

-var update = p.data(dataset) 表示绑定数据,并得到update部分，

-var enter = update.enter() 表示得到到enter部分

-var pEnter = enter.append("p")//添加足够多的
pEnter.text(function(d,i){
return "enter: "+d+",index: "+i;

}) 表示添加足够多的，并设置文本

2、Update与Exit的使用

<body>
<p>dog</p>
<p>cat</p>
<p>pig</p>
<p>rat</p>

<script>
var dataset = [3,6];
var p = d3.select("body")
.selectAll("p");
var update = p.data(dataset)//绑定数据,并得到update部分
var exit = update.exit();//得到exit部分
//下面检验是否真的得到
//对于update的处理
update.text(function(d,i){
return "update: "+d+",index: "+i;
})
//对于exit的处理通常是删除 ，但在这里我并没有这么做 
exit.text(function(d,i){
return "exit";
})
</script>
</body>

运行结果：

代码说明：

-这里需要说明的是：在得到exit部分后，不需要使用append("xx")来添加元素，而enter需要，这样很容易理解其实。还有就是，对于exit部分的处理通常是删除exit.remove();（这里还没讲，下一章会详细讲解）
————————————————
版权声明：本文为CSDN博主「数星星等天明」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34414916/article/details/80027353

转载于:https://www.cnblogs.com/cangqinglang/p/11609210.html

dibisha7239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3.js的v5版本入门教程（第四章）—— 理解Update、Enter、Exit

D3.js的v5版本入门教程（第四章）Update、Enter、Exit是D3.js中很重要的概念，下面来讲一下它们到底是什么？（当你看完后。你就会知道如果数据集个数和选择集个数不匹配的情况下使用data()，D3.js会怎么办）在使用data()时，例如现在我们有一个数组[3,6,9,12,15],我们可以将数组每一项与一个绑定，但是，现在就有...
复制链接

扫一扫