d3.js selection.insert()用法及代码示例

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

用法:

selection.insert(type[, before]);

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

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

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

范例1：在选择中所有元素之前插入元素时。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
  
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h4>D3.js selection.insert() Function</h4> 
  
    <span> 
        Div will be inserted before "Click Here!" 
    </span> 
    <p id="p"><b>Click Here!</b></p> 
  
    <script> 
        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); 
    </script> 
</body> 
  
</html>

输出：

在单击click “Click Here”元素之前：

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" path1tent= 
        "width=device-width, initial-scale=1.0"> 
                      
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
  
    <style> 
        h1 { 
            color:green; 
        } 
  
        div { 
            width:300px; 
            color:#ffffff; 
            height:50px; 
            background-color:green; 
            margin:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <h4>D3.js selection.insert() Function</h4> 
  
    <div><span>Click Here!</span></div> 
  
    <script> 
        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); 
    </script> 
</body> 
  
</html>

输出：

在单击“Click Here”元素之前：

单击“Click Here”元素后：

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 D3.js selection.insert() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。