D3.js selection.selectAll() Function
The selection.selectAll() function in d3.js is used to select all the descendant elements that match the particular selector string which is given as the parameter. If no matches are found then null is returned by this function.
Syntax:
selection.selectAll(selector);
Parameters: The above-given function takes only one parameter which is given above and described below:
- Selector: This is the name of the container to be selected.
Return Values: It returns the array of elements is found else null is returned..
Below given are a few examples of the function given above.
Example1: When selection is not Null.
<!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> </style> <body> <div>Beginner for Beginner <b>This text is in bold</b> <b>This text is also in bold</b> </div> <div><b>Beginner for Beginner</b></div> <div>Some text</div> <script src = "https://d3js.org/d3.v4.min.js"> </script> <script src= "https://d3js.org/d3-selection.v1.min.js"> </script> <script> let selection=d3.selectAll("div").selectAll("b"); console.log(selection.nodes()); console.log(selection.node()); </script> </body> </html> |
Output:
Example 2: When selection is null.
<!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> </style> <body> <div>Beginner for Beginner <b>This text is in bold</b> <b>This text is also in bold</b> </div> <div><b>Beginner for Beginner</b></div> <div>Some text</div> <script src = "https://d3js.org/d3.v4.min.js"> </script> <script src= "https://d3js.org/d3-selection.v1.min.js"> </script> <script> let selection=d3.selectAll("div").selectAll("br"); console.log(selection.nodes()); console.log(selection.node()); </script> </body> </html> |
Output: