Sunday, November 17, 2024
Google search engine
HomeLanguagesJavascriptD3.js node.eachBefore() Function

D3.js node.eachBefore() Function

The node.eachBefore() function is used to invoke a particular function for each node but in a pre-order-traversal order. It visits each node in pre-traversal order and performs an operation on that particular node and each of its descendants.

Syntax:

node.eachBefore(function);

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

  • function: This is the function that is to be invoked for each node.

Return Value: 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 = {
            // Root node
            name: "rootNode",
            children: [
                {
                    // Child of root node
                    name: "child1",
                    value: 2
                },
                {
                    // Child of root node
                    name: "child2",
                    value: 3,
                    children: [
                        {
                            // Child of child2
                            name: "grandchild1",
                            value: 1,
                            children: [
                                {
                                    // Child of grandchild1
                                    name: "grand_granchild1_1",
                                    value: 4
                                },
                                {
                                    // Child of grandchild1
                                    name: "grand_granchild1_2",
                                    value: 5
                                }
                            ]
                        },
                        {
                            name: "grandchild2",
                            children: [
                                {
                                    // Child of grandchild2
                                    name: "grand_granchild2_1"
                                },
                                {
                                    // Child of grandchild2
                                    name: "grand_granchild2_2"
                                }
                            ]
                        }
                    ]
                }
            ]
        };
  
        var obj = d3.hierarchy(tree);
  
        const BFS = [];
  
        obj.eachBefore(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>
        var obj = d3.hierarchy({
            // Root node
            name: "rootNode",
            children: [
                {
                    // Child of root node
                    name: "child1",
                    value: 2
                },
                {
                    // Child of root node
                    name: "child2",
                    value: 3,
                    children: [
                        {
                            // Child of child2
                            name: "grandchild1",
                            value: 1,
                            children: [{
                                // Child of grandchild1
                                name: "grand_granchild1_1",
                                value: 4
                            },
  
                            {
                                // Child of grandchild1
                                name: "grand_granchild1_2",
                                value: 5
                            }]
                        }
                    ]
                }
            ]
        });
  
        const BFS = [];
  
        obj.eachBefore(d => BFS.push
            (
                " ".repeat(d.depth) 
                    + `${d.depth}: ${d.data.name}`
            ));
  
        console.log(BFS);
    </script>
</body>
  
</html>


Output:

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

RELATED ARTICLES

Most Popular

Recent Comments