D3.js的v5版本入门教程(第四章)

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

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

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

    例子二:exit:如果数组[3]绑定到三个<p>上,可以想象,最后两个<p>没有可绑定的数据,那么没有数据绑定的部分就称为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")//添加足够多的<p>
    pEnter.text(function(d,i){
    return "enter: "+d+",index: "+i;

    }) 表示添加足够多的<p>,并设置文本

    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


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

小tips: 使用&#x3000;等空格实现最小成本中文对齐知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。