La función node.sum() en d3.js se usa para evaluar la función de valor especificado para un Node en particular. La propiedad node.value de esta función contiene el valor devuelto por la función especificada.
Sintaxis:
node.sum(value);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- valor: Esto toma una función para ser evaluada para cada Node.
Valores devueltos: esta función devuelve un objeto.
A continuación se dan algunos ejemplos de la función dada anteriormente.
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", // Root node
children: [
{
name: "child1", // Child of root node
value: 2
},
{
name: "child2", // Child of root node
value: 3,
children: [
{
name: "grandchild1", // Child of child2
value: 1,
children:[
{name: "grand_granchild1_1",value: 4},
// Child of grandchild1
{name: "grand_granchild1_2",value: 5}
// Child of grandchild1
]
},
{
name: "grandchild2",
children:[
{name: "grand_granchild2_1"},
// Child of grandchild2
{name: "grand_granchild2_2"}
// Child of grandchild2
]
},
]
}
]
};
var obj = d3.hierarchy(tree);
var grandchild2=obj.children[1].children[1];
var sum=obj.sum(d=>d.value);
console.log(sum);
console.log("The sum of value is: ",sum.value);
</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={
name: "rootNode", // Root node
children: [
{value:1},
{value:2},
{value:3},
{value:4},
{value:5},
{value:6},
]
};
var obj = d3.hierarchy(tree);
var sum=obj.sum(d=>d.value*12);
// 1 + 2 + 3 + 4 + 5 + 6 = 21*12=252
console.log(sum);
console.log("The value is: ",sum.value);
</script>
</body>
</html>
Producción:
