D3.js selection.insert()函数

selection.insert()函数用于在指定位置附加给定类型的新元素。它在每个选定元素的选择器之前插入一个新元素。

句法：

selection.insert(type[, before]);

参数：此函数采用上面给出并描述如下的两个参数：

• type：它是一个定义元素类型的字符串。
• before：它是一个字符串，它定义一个元素，在该元素之前插入一个新元素。

返回值：此函数必须返回插入新元素的子元素。

示例 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 {
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    

  

    GeeksforGeeks
  
    D3.js selection.insert() Function
  
    
        Div will be inserted before "Click Here!"
    
    Click Here!
  
    
        function func() {
            // Selecting all p and appending a DIV
            // before the b tag to each p tag
            var chk = d3.selectAll("p")
                .insert("div", "b");
        }
        clickme = document.getElementById("p");
        clickme.addEventListener("click", func);
    

  

输出：

在单击“单击此处”元素之前：

在单击“单击此处”元素之前：

示例 2：在选择中的第一个元素之前插入元素时。

HTML

  

    
    
                      
    
    
  
    
        h1 {
            color: green;
        }
  
        div {
            width: 300px;
            color: #ffffff;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    

  

    GeeksforGeeks
  
    D3.js selection.insert() Function
  
    Click Here!
  
    
        function func() {
            // Selecting div and Inserting 
            // <b> tag before <span> tag
            var div = d3.select("div")
                .insert("b", "span");
            var b = document.querySelector("b");
            b.innerText = "This <b> tag is appended. ";
        }
        btn = document.querySelector("div");
        btn.addEventListener("click", func);
    

  

输出：

在单击“单击此处”元素之前：

单击“单击此处”元素后：