D3.js hierarchy() Function

20 June 2025

0

The d3.hierarchy() function in D3.js library is used to construct a root node data from a given hierarchical data. The data that is given must be of an object and must represent a root node.

Syntax:

d3.hierarchy(data[, children]);

Parameters: This function takes a single parameter as given above and described below.

data: This parameter is an object of representing hierarchical data.

Return Value: This function return an object.

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: "grandChild2" }, 
                        { name: "grandChild3" }, 
                        { name: "grandChild4" } 
                    ] 
                }, 
                { 
                    name: "child3", 
                    children: [ 
                        { name: "grandChild5" }, 
                        { name: "grandChild6" }, 
                    ] 
                } 
            ] 
        }); 
        console.log(obj);         
    </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" }, 
                    ] 
                } 
            ] 
        }); 
        console.log(obj); 
        console.log(obj.data); 
        console.log(obj.data.children[0]);         
    </script> 
</body> 
  
</html> 