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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。