The node.leaves() function in d3.js is used to return an array of leaf nodes of the given hierarchical data in traversal order.
Syntax:
node.leaves();
Parameters: This function does not accept any parameters.
Return Values: This function return an array.
Note: Leaf nodes are those nodes which have no children.
Below given are a few examples of the function given above.
Example 1:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" path1tent= "width=device-width, initial-scale = 1.0" /> </script> </head> <body> <script> // Constructing a tree var tree = { name: "rootNode", children: [ { name: "child1_leaf1" }, { name: "child2", children: [ { name: "grandchild1", children: [ { name: "leaf2" } ] }, ] }, { name: "child3", children: [ { name: "leaf3" }, { name: "leaf4" }, ] } ] }; var obj = d3.hierarchy(tree); // Leaf nodes of the above given tree console.log("Leaf nodes are: "); console.log(obj.leaves()); </script> </body> </html> |
Output:
Example 2: The following code demonstrates accessing data of leaf nodes.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" path1tent= "width=device-width, initial-scale = 1.0"/> </script> </head> <body> <script> // Constructing a tree var tree = { name: "rootNode", children: [ { name: "child1_leaf1" }, { name: "child2", children: [ { name: "grandchild1", children: [ { name: "leaf2" } ] }, ] }, { name: "child3", children: [ { name: "leaf3" }, { name: "leaf4" }, ] } ] }; var obj = d3.hierarchy(tree); // Leaf nodes of the above given tree are: console.log(" Accessing Leaf nodes: "); let leafArr = obj.leaves(); leafArr.forEach((e) => { console.log(e.data); console.log("depth: ", e.depth); }) </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
