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= Â Â Â Â </script> Â Â Â Â <script src= Â Â Â Â </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 neveropen</b> Â Â Â Â Â Â Â Â <b>4. Geeks for neveropen</b> Â Â Â Â Â Â Â Â <b>5. Geeks for neveropen</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= Â Â Â Â </script> Â Â Â Â <script src= Â Â Â Â </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 neveropen</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=     </script>     <script src=     </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 neveropen</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:
