D3.js selection.enter()函数

D3.js 中的d3.selection.enter()函数用于创建缺失的元素并返回输入选择。

句法：

selection.enter(); 

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

返回值：此函数返回输入选择。

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

示例 1：

HTML

    
        
        
        D3.js selection.enter() Function
    
    
        div {
            background-color: green;
            color: #ffffff;
            width: 50px;
            margin-bottom: 5px;
            padding: 20px;
            height: 10px;
        }
    
    
        
        
        
        
        
        
            var div = d3
                .select("body")
                .selectAll("div")
                .data(["geeks", "for", "geeks"])
                .enter()
                .append("div")
                .text((d) => {
                    return d;
                });
        
    

输出：

示例 2：

HTML

    
        
        
        D3.js selection.enter() 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;
                });
            var span = d3
                .select("body")
                .selectAll("span")
                .data("I am from span")
                .enter()
                .append("span")
                .text((d) => {
                    return d;
                });
            var p = d3
                .select("body")
                .selectAll("p")
                .data(["paragraph", "paragraph"])
                .enter()
                .append("p")
                .text((d) => {
                    return d;
                });
        
    

输出：