La función d3.selection.filter() en d3.js se usa para filtrar la selección dada y devolver una nueva selección para la cual el filtro es verdadero. El filtro a utilizar puede ser una string o una función.
Sintaxis:
selection.filter(filter);
Parámetros: esta función acepta un parámetro como se mencionó anteriormente y se describe a continuación:
- filtro: Es una string o una función que se usaría para filtrar una selección. El filtro se aplica a cada elemento seleccionado cuando se utiliza una función.
Valores devueltos: esta función devuelve la nueva selección.
Ejemplo 1: este ejemplo selecciona todos los hijos impares del elemento especificado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
</head>
<body>
<div>
<b>1. This text is in bold</b>
<b>2. This text is also in bold</b>
<b>3. Geeks for geeks</b>
<b>4. Geeks for geeks</b>
<b>5. Geeks for geeks</b>
</div>
<script>
let selection = d3.selectAll("b")
.filter(":nth-child(odd)")
.nodes();
selection.forEach((e) => {
console.log(e.textContent)
})
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo selecciona todos los hijos pares del elemento especificado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
</head>
<body>
<div>
<b>1. This text is in bold</b>
<b>2. This text is also in bold</b>
<b>3. Geeks</b>
<b>4. Geeks</b>
<b>5. Geeks for geeks</b>
</div>
<script>
let selection = d3.selectAll("b")
.filter(":nth-child(even)")
.nodes();
selection.forEach((e) => {
console.log(e.textContent)
})
</script>
</body>
</html>
Producción:
Ejemplo 3: este ejemplo utiliza selection.selectAll como filtro.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
</head>
<body>
<div>
<h3>1. This text is in bold</h3>
<h3>2. This text is also in bold</h3>
<h3>3. Geeks</h3>
<h3>4. Geeks</h3>
<h3>5. Geeks for geeks</h3>
</div>
<script>
// Using selection.selectAll with filter
let selection = d3.selectAll("div")
.selectAll("h3")
.filter(":nth-child(even)")
.nodes();
selection.forEach((e) => {
console.log(e.textContent)
})
</script>
</body>
</html>
Producción:
