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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。