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!
… [Trackback]
[…] Find More on that Topic: geeksforgeeks.org/d3-js-node-leaves-function/ […]