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 =  
"https://d3js.org/d3.v4.min.js">  
  </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 =  
"https://d3js.org/d3.v4.min.js">  
  </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>