Skip to content
Related Articles

Related Articles

Improve Article

D3.js node.descendants() Function

  • Last Updated : 23 Sep, 2020

The node.descendants() function in d3.js library is used to generate and return an array of descendant nodes.

Syntax:

node.descendants();

Parameters: This function does not accept any parameters.

Return Values: This function returns an array.

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>
        var obj = d3.hierarchy({
            name: "rootNode",
            children: [
                {
                    name: "child1"
                },
                {
                    name: "child2",
                    children: [
                        { name: "grandChild1" },
                    ]
                },
                {
                    name: "child3",
                    children: [
                        { name: "grandChild5" },
                        { name: "grandChild6" },
                        { name: "grandChild7" },
                        { name: "grandChild8" },
                    ]
                }
            ]
        });
        // Descendant of child3
        console.log("Descendant of child3 are: ");
        console.log(obj.children[2]
            .descendants()[0].data.name);
  
        console.log(obj.children[2]
            .descendants()[1].data.name);
  
        console.log(obj.children[2]
            .descendants()[2].data.name);
  
        console.log(obj.children[2]
            .descendants()[3].data.name);
  
        console.log(obj.children[2]
            .descendants()[4].data.name);
    </script>
</body>
  
</html>

Output:

Example 2:

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>
        var obj = d3.hierarchy({
            name: "rootNode",
            children: [
                {
                    name: "child1"
                },
                {
                    name: "child2",
                    children: [
                        { name: "grandChild1" },
                    ]
                },
                {
                    name: "child3",
                    children: [
                        { name: "grandChild5" },
                        { name: "grandChild6" },
                        { name: "grandChild7" },
                        { name: "grandChild8" },
                    ]
                }
            ]
        });
  
        // Descendant of child3
        console.log("Descendant of child3 are: ");
        console.log(obj.children[2].descendants());
    </script>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :