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

d3.js中的selection.text()函數用於將文本內容設置為所選元素的指定值，因此它將替換任何現有的子元素。如果給定的值是常數，則所有元素都將被賦予該常數。

用法:

selection.text([value]);

參數：此函數僅接受上麵給出並在下麵描述的一個參數：

value:要設置的文本內容值。

返回值： 此函數不返回任何值。

範例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> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <div> 
        <button>Click me</button> 
    </div> 
      
    <script> 
        function func() { 
              
            // Sets the text-content of the button 
            var chk = d3.select("button") 
                .text("This is the changed text"); 
            var text = document.querySelector("button"); 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

範例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> 
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <div style="background-color:green;  
              width:fit-content;  
              padding:10px;  
              margin-top:5px;" class="btn"> 
        This text will be changed 
    </div> 
  
    <div style="background-color:green;  
              width:fit-content;  
              padding:10px;  
              margin-top:5px;" class="btn"> 
        This text will be changed 
    </div><br> 
    <br> 
      
    <button class="Clickme">Change text</button> 
      
    <script> 
        function func() { 
              
            // Selecting all buttons and 
            // Setting the text content of the button 
            var chk = d3.selectAll(".btn") 
                .text("This text is changed"); 
            var text = document.querySelector("button"); 
        } 
        let btn = document.querySelector(".Clickme"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

輸出：

在單擊按鈕之前：
單擊按鈕後：

相關用法

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