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> </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> </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, zambiatek 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!
