D3.js matcher() Function
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 > |
Output: