Skip to content
Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :