Skip to content
Related Articles

Related Articles

Improve Article

D3.js hierarchy() Function

  • Last Updated : 23 Sep, 2020

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :