4. 理解Update、Enter、Exit 与添加、删除元素

柔光的暖阳◎ 2022-12-13 04:40 66阅读 0赞

# 理解Update、Enter、Exit 与 添加、删除元素 #

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

*  数组`[3,6,9,12,15]`绑定到三个`<p>`上。可以想象到，数组的最后两个元素没有可以绑定的元素，这时D3会建立两个空的元素与数组最后的两个数据相对于，那么这部分就称为`Enter`。而有元素与数据对应的部分就称为`Update`
 *  如果数组\[3\]绑定到三个`<p>`上，可以想象，最后两个`<p>`没有可绑定的数据，那么没有数据绑定的部分就称为`Exit`

##### Update与Enter的使用 #####

<body>
        <p>name1</p>
        <p>name2</p>
        <p>name3</p>
        
        <script>
        	var dataset = [3,6,9,12,15];
        	var p = d3.selectAll("p");
        	var update = p.data(dataset)//绑定数据,并得到update部分
        	var enter = update.enter();//得到enter部分
        	//下面检验是否真的得到
        	//对于update的处理
        	// 匿名函数第一个参数 d 为每个元素所绑定的对应数据 data
        	// 匿名函数第一个参数 i 为每个元素的索引，从 0 开始递增
        	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;
        	})
    		
    		/*
    			运行结果如下：
    			update: 3,index: 0
    			update: 6,index: 1
    			update: 9,index: 2
    			enter: 12,index: 3
    			enter: 15,index: 4
    		*/
        </script>
      </body>

##### Update与Exit的使用 #####

<body>
    	<p>name1</p>
        <p>name2</p>
        <p>name3</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.remove() 	
            exit.text(function(d,i){
         
                return "exit";
            })
            /*
    			运行结果如下：
    			update: 3,index: 0
    			update: 6,index: 1
    			exit
    		*/
        </script>
     </body>

##### `selection.join(enter[, update][, exit])` #####

这是`V5`版本的新特性，这种方法很方便，可以代替`selection.enter`, `selection.exit`, `selection.append`, `selection.remove`, `selection.order`.

svg.selectAll("circle")
      .data(data)
      .join("circle")
        .attr("fill", "none")
        .attr("stroke", "black");

简写相当于:

svg.selectAll("circle")
      .data(data)
      .join(
        enter => enter.append("circle"),
        update => update,
        exit => exit.remove()
      )
        .attr("fill", "none")
        .attr("stroke", "black");

通过在进入、更新和退出上传递单独的函数，您可以更好地控制发生的事情。通过指定选择的关键函数、数据，您可以尽量减少对DOM的更改以优化性能。例如，为输入和更新设置不同的填充颜色:

svg.selectAll("circle")
      .data(data)
      .join(
        enter => enter.append("circle").attr("fill", "green"),
        update => update.attr("fill", "blue")
      )
        .attr("stroke", "black");

[1]: /images/20221123/6623187a0d3749d0ac3055c094ec75a6.png