D3.js node.descendants() Function

0 0 2 minutes read

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!

Last Updated :
23 Sep, 2020