Skip to content
Related Articles

Related Articles

Improve Article

D3.js matcher() Function

  • Last Updated : 19 Aug, 2020

The d3.matcher() function in d3.js is used to return a function which either returns true or false depending on the element. If element matches than it returns true else it returns false.

Syntax:

d3.matcher(selector);

Parameters: The above-given function takes only one parameter which is given above and described below:

  • selector: Here selector is the name of the HTML tag that is to be matched.

Return Values: This function returns a function that returns a boolean value.

Below given are a few examples of the function given above.



Example1:




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8"
    <meta name="viewport"
            path1tent="width=device-width, 
                    initial-scale=1.0"> 
    <title>Document</title
</head
<style>
    h5{
        line-height:5px;
    }
</style
<body>  
    <div>
  
    </div>
    <div>
        <h5>This is text1</h5>
        <h5>This is text2</h5>
        <h5>This is text3</h5>
        <h5>This is text4</h5>
    </div>
  <script src
  </script>
  <script>
    var heading= d3.selectAll("h5");
    var matcher=heading.filter(d3.matcher("h5"))
                       .node();
    var filter=heading.filter(d3.matcher("h5"))
                      .node();
    console.log(matcher);
    console.log(filter);
  </script
</body
</html>

Output:

Example 2:




<!DOCTYPE html> 
<html lang="en"
<head
    <meta charset="UTF-8"
    <meta name="viewport"
            path1tent="width=device-width, 
                    initial-scale=1.0"> 
    <title>Document</title
</head
<style>
    p{
        line-height:5px;
    }
</style
<body>  
    <div>
  
    </div>
    <div>
        <p>This is text1</p>
        <p>This is text2</p>
        <p>This is text3</p>
        <p>This is text4</p>
    </div>
  <script src
  </script>
</script>
  <script>
    var heading= d3.selectAll("p");
    var matcher=heading.filter(d3.matcher("p"))
                       .nodes();
    var filter=heading.filter(d3.matcher("p"))
                      .nodes();
    // Matcher and filter are same and equal
    console.log(matcher);
    console.log(filter);
    // Matcher and filter are same and equal so it returns true
    console.log(matcher[0]==filter[0])
  </script
</body
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :