La función node.each() se usa para evaluar una función para cada Node en Breadth First Order. En esto, cada Node se visita exactamente una vez. Esta función se llama repetidamente para cada Node descendiente.
Sintaxis:
node.each(function);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- función: Esto requiere que se llame a una función en cada Node en el orden BFS.
Valores devueltos: esta función no devuelve nada.
Ejemplo 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>
Producción:
Ejemplo 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>
Producción:
