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

selection.classed()函数用于将类设置为所选元素。此函数也可以用于将类设置为所选的特定元素。

用法:

selection.classed(names[, value]);

参数：above-given函数采用上面给出和下面描述的两个参数：

name:它是要赋予所选元素的类的名称。
value:是布尔值，即设置或取消设置类的true或false。

返回值：此函数不返回任何内容。

范例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>
    <div>
        <a>GeeksforGeeks</a>
    </div>
  
    <script>
  
        // Sets the class to the a tag
        var a = d3.select("a")
            .classed("className", true);
          
        // This will select the anchor tag
        var divselect = document.querySelector(".className");
        console.log(divselect.innerHTML);
    </script>
</body>
  
</html>

输出：

GeeksforGeeks

范例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>
    <div>
        <p class="classGiven classGiven2">
            GeeksforGeeks
        </p>
    </div>
  
    <script>
  
        // Unsets the class named classGiven
        // to the "p" tag
        var a = d3.select("p")
            .classed("classGiven2", false);
  
        // This will select the "p" tag
        var divselect = document
            .querySelector(".classGiven");
              
        console.log(divselect.innerHTML);
  
        // This will not select the "p" tag
        // As the classGiven 2 is unset
          
        var divselect = document
            .querySelector(".classGiven2");
  
        console.log(divselect);
    </script>
</body>
  
</html>

输出：

GeeksforGeeks
null

相关用法

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