D3.js node.each() Function

Last Updated : 31 Aug, 2020

The node.each() function is used to evaluate a function for each node in Breadth First Order. In this, every node is visited exactly one time. This function is called repeatedly for each descendant node.

Syntax:

node.each(function);

Parameters: This function accepts a single parameter as mentioned above and described below:

function: This takes a function to be called on each node in the BFS order.

Return Values: This function does not return anything.

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"
                },
                {
                    name: "child2",
                    children: [
                        {
                            name: "grandchild1",
                            children:[
                                {
                                    name: "grand_granchild1_1"
                                },
                                {
                                    name: "grand_granchild1_2"
                                }
                            ]
                        },
                        {
                            name: "grandchild2",
                            children:[
                                {
                                    name: "grand_granchild2_1"
                                },
                                {
                                    name: "grand_granchild2_2"
                                }
                            ]
                        },
                    ]
                }
            ]
        };

        var obj = d3.hierarchy(tree);

        const BFS = [];
        
        // Function is used
        obj.each(d => BFS.push(
            " ".repeat(d.depth) + `${d.depth}: ${d.data.name}`
            ));

        BFS.forEach((e)=>{
            console.log("level: ",e);
        });
    </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> 
    // Constructing a tree
    var tree={
            // Level zero
            name: "rootNode",
            children: [
                {
                    // Level one
                    name: "child1"
                },
                {
                    // Level one
                    name: "child2",
                    children: [
                        {
                            // Level two
                            name: "grandchild1",
                            children:[{
                                name: "grand_granchild1_1"
                            },
                            {
                                name: "grand_granchild1_2"
                            }]
                        }
                    ]
                },
                
                {
                    // Level one
                    name: "child3"
                },
                {
                    // Level one
                    name: "child4"
                }
            ]
        };

        var obj = d3.hierarchy(tree);

        const BFS = [];
      
        // Function is used
        obj.each(d => BFS.push(
            " ".repeat(d.depth) 
                + `${d.depth}: ${d.data.name}`
        ));

        console.log(BFS);
    </script> 
</body> 

</html>

Output:

D3.js node.eachAfter() Function

tarun007

Improve

Article Tags :

D3.js node.each() Function

Similar Reads

d3-axis

d3-chord

d3-color

d3-interpolate

d3-contour

d3-delaunay

d3-hierarchy

d3-scale

d3-scale-chromatic

Thank You!

What kind of Experience do you want to share?