d3.js selection.append()用法及代碼示例

selection.append()函數用於將新元素附加到HTML標記名稱，如元素末尾的參數中所給。如果給定的類型是一個函數，則必須為選擇中的每個元素求值。

用法:

 selection.append(type);

參數：該函數僅采用上麵給出和下麵描述的一個參數。

type:此參數采用定義元素類型的字符串。

返回值：此函數必須返回要添加到末尾的元素。

範例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 { 
            width:50px; 
            height:50px; 
            background-color:green; 
            margin:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h4>D3.js | selection.append() Function</h4> 
  
    <p><b>Click me</b></p> 
    <p><b>Click me</b></p> 
  
    <script> 
        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); 
    </script> 
</body> 
  
</html>

輸出：

在單擊“click me”元素之前：
單擊“click me”元素後：

範例2：在以下示例中，元素僅附加到第一個元素。

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport"
            path1tent="width=device-width,  
                    initial-scale=1.0">    
</head>  
<style> 
    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; 
    } 
</style>  
<body>   
    <h1>Geeks for geeks</h1> 
    <p>Click me.</p> 
    <p>Click me.</p> 
  <script src =  
"https://d3js.org/d3.v4.min.js">  
  </script> 
  <script>  
  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); 
  
  </script>  
</body>  
</html>

輸出：

在單擊“click me”按鈕之前：
單擊“click me”按鈕後：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js selection.append() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。