D3.js selection.append()函数

selection.append()函数用于将新元素附加到元素末尾的参数中给出的 HTML 标记名称。如果给定的类型是函数，则必须为选择中的每个元素评估它。

句法：

selection.append(type);

参数：这个函数只接受一个上面给出和下面描述的参数。

• type：此参数采用定义元素类型的字符串。

返回值：此函数必须返回一个要在末尾附加的元素。

示例 1：在以下示例中，元素被附加到每个选定元素。

HTML

  

    
    
    
    
  
    
        h1 {
            color: green;
        }
  
        p {
            background-color: #f2f2f2;
            padding: 10px;
            width: 300px;
            line-height: 5px;
        }
  
        p:hover {
            background-color: grey;
            padding: 10px;
            cursor: pointer;
        }
  
        div {
            width: 50px;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    

  

    GeeksforGeeks
    D3.js | selection.append() Function
  
    Click me
    Click me
  
    
        function func() {
            // Selecting all p and
            // Appending a DIV to each p tag
            var chk = d3.selectAll("p")
                .append("div");
            var div = document.querySelector("div");
            console.log(div)
        }
        let btn = document.querySelector("p");
        btn.addEventListener("click", func);
    

  

输出：

• 在单击“单击我”元素之前：

  

• 单击“单击我”元素后：

  

示例 2：在以下示例中，元素仅附加到第一个元素。

HTML

 
 
 
     
       
 

    h1{
        line-height: 5px;
        color: green;
    }
    h1, h2, p, h4, h5, h6{
        background-color: #f2f2f2;
        padding:20px;
        width: 300px;
        line-height: 5px;
    }
    p:hover{
        background-color: grey;
        cursor: pointer;
    }
    div{
        width: 50px;
        height: 50px;
        background-color: green;
        margin:10px;
    }
 
  
    Geeks for geeks
    Click me.
    Click me.
   
  
   
  function func(){
            // Selecting  p and
            // Appending a DIV to the p tag
            // Only first p tag is effected
            var chk = d3.select("p")
                        .append("b");
            var b=document.querySelector("b");
            b.innerText=" This <b> tag is appended."
        }
    let btn=document.querySelector("p");
    btn.addEventListener("click", func);
  
   
 

输出：

• 在点击“点击我”按钮之前：

  

• 点击“点击我”按钮后：