D3.js selection.exit()函数

D3.js 中的d3.selection.exit()函数用于删除与旧数据相对应的元素或标签，或者简单地说这用于使用给定的新数据更新之前创建的 DIV 元素。

句法：

selection.exit();

参数：此函数不接受任何参数。

返回值：此函数返回退出选择。

下面的示例说明了 JavaScript 中的 D3.js selection.exit()函数：

示例 1：

HTML

    
        
        
        D3.js selection.exit() Function
    
    
        div {
            background-color: green;
            color: #ffffff;
            width: 100px;
            margin-bottom: 5px;
            padding: 18px;
            box-sizing: border-box;
            height: 60px;
        }
    
    
        
        
        
        
        
        
            
            // This will create DIVs having data as given
            var div = d3
                .select("body")
                .selectAll("div")
                .data(["geeks", "for", "geeks"])
                // Old dataset
                .enter()
                .append("div")
                .text(function (d) {
                    return d;
                });
  
            div = div.data(["DIVS UPDATED", "GEEKS", 
                            "FOR", "GEEKS"], function (d) {
                return d;
            }); //Updated new data set.
            div.enter()
                .append("div")
                .text(function (d) {
                    return d;
                });
            div.exit().remove();
        
    

输出：

示例 2：

HTML

    
        
        
        D3.js selection.exit() Function
    
    
        div {
            background-color: green;
            color: #ffffff;
            width: 50px;
            margin-bottom: 5px;
            padding: 20px;
            height: 10px;
        }
    
    
        
        
        
        
        
        
            var h2 = d3
                .select("body")
                .selectAll("h2")
                .data(["I am from heading level 2"])
                .enter()
                .append("h2")
                .text((d) => {
                    return d;
                });
  
            // Updated heading
            h2 = h2.data(["Heading Updated"], function (d) {
                return d;
            });
            //Updated new data set.
            h2.enter()
                .append("h2")
                .text(function (d) {
                    return d;
                });
            h2.exit().remove();
  
            var span = d3
                .select("body")
                .selectAll("span")
                .data("I am from span")
                .enter()
                .append("span")
                .text((d) => {
                    return d;
                });
  
            // Updated span
            span = span.data(["SPAN UPDATED ", "GEEKS", 
                              "FOR", "GEEKS"], function (d) {
                return d;
            }); //Updated new data set.
            span.enter()
                .append("span")
                .text(function (d) {
                    return d;
                });
            span.exit().remove();
        
    

输出：

在使用 exit()函数之前：

使用 exit()函数后：