Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

D3.js node.leaves() Function

  • Last Updated : 23 Sep, 2020

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 src="https://d3js.org/d3.v4.min.js">
    </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 src="https://d3js.org/d3.v4.min.js">
    </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:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!