D3.js selection.filter() Function - GeeksforGeeks

19 Aug, 2020
The d3.selection.filter() function in d3.js is used to filter the given selection and return a new selection for which the filter is true. The filter to be used may be a string or a function.
Syntax:
selection.filter(filter);
Parameters: This function accepts one parameter as mentioned above and described below:
filter: It is a string or a function that would be used to filter a selection. The filter is applied to each selected element when using a function.
Return Values: This function returns the new selection.
Example 1: This example selects all the odd children of the specified element.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width,initial-scale=1.0">          <script src=        "https://d3js.org/d3.v4.min.js">    </script>    <script src=        "https://d3js.org/d3-selection.v1.min.js">    </script></head>  <body>    <div>        <b>1. This text is in bold</b>        <b>2. This text is also in bold</b>        <b>3. Geeks for geeks</b>        <b>4. Geeks for geeks</b>        <b>5. Geeks for geeks</b>    </div>         <script>        let selection = d3.selectAll("b")            .filter(":nth-child(odd)")            .nodes();        selection.forEach((e) => {            console.log(e.textContent)        })    </script></body>  </html>
Output:
Example 2: This example selects all the even children of the specified element.
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width,initial-scale=1.0">    <script src=        "https://d3js.org/d3.v4.min.js">    </script>    <script src=        "https://d3js.org/d3-selection.v1.min.js">    </script></head>  <body>    <div>        <b>1. This text is in bold</b>        <b>2. This text is also in bold</b>        <b>3. Geeks</b>        <b>4. Geeks</b>        <b>5. Geeks for geeks</b>    </div>          <script>        let selection = d3.selectAll("b")            .filter(":nth-child(even)")            .nodes();        selection.forEach((e) => {            console.log(e.textContent)        })    </script></body>  </html>
Output:
Example 3: This example uses selection.selectAll as a filter.
HTML
<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">      <script src=        "https://d3js.org/d3.v4.min.js">    </script>    <script src=        "https://d3js.org/d3-selection.v1.min.js">    </script></head>  <body>    <div>        <h3>1. This text is in bold</h3>        <h3>2. This text is also in bold</h3>        <h3>3. Geeks</h3>        <h3>4. Geeks</h3>        <h3>5. Geeks for geeks</h3>    </div>          <script>          // Using selection.selectAll with filter        let selection = d3.selectAll("div")            .selectAll("h3")            .filter(":nth-child(even)")            .nodes();        selection.forEach((e) => {            console.log(e.textContent)        })    </script></body>  </html>
Output:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
How to get selected value in dropdown list using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?