La función selection.each() en D3.js se usa para llamar a la función particular para cada elemento HTML seleccionado. En la función, el dato (d) y el índice (i) se dan como parámetros. Mediante el uso de este método, se puede acceder a los datos principales y secundarios simultáneamente.
Sintaxis:
selection.each(callback);
Parámetros: Esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación.
- devolución de llamada: esta es la función que invoca cada elemento seleccionado.
Valores devueltos: esta función no devuelve nada.
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"/>
<title> D3.js selection.each() Function</title>
</head>
<style>
.div {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
div {
background-color: red;
width: 10px;
height: 10px;
}
</style>
<body>
<ul>
<li>Geeks for geeks</li>
<li>Some text</li>
</ul>
<ul>
<li>List tag</li>
<li>each function</li>
</ul>
<button>Click me</button>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let btn = document.querySelector("button");
let func = () => {
let p = d3.selectAll("ul");
p.each(function (p, j) {
d3.select(this)
.selectAll("li")
.text(function (d, i) {
return "child are edited.";
});
});
};
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botó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"/>
<title>D3.js selection.each() Function</title>
</head>
<style>
div {
background-color: green;
margin-bottom: 5px;
padding: 10px;
width: fit-content;
}
</style>
<body>
<div>Some text</div>
<div>Geeks</div>
<div>Geeks for geeks</div>
<div>Some text</div>
<button>Click me</button>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let btn = document.querySelector("button");
let func = () => {
let p = d3.selectAll("div");
console.log(p);
p.each(function (p, j) {
console.log("p: " + p, "j: " + j);
d3.select(this).text(function (d, i) {
return "DIVs are edited.";
});
});
};
btn.addEventListener("click", func);
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
