La función selection.selectAll() en d3.js se usa para seleccionar todos los elementos descendientes que coincidan con la string de selector particular que se proporciona como parámetro. Si no se encuentran coincidencias, esta función devuelve nulo.
Sintaxis:
selection.selectAll(selector);
Parámetros: la función dada arriba toma solo un parámetro que se da arriba y se describe a continuación:
- Selector: Este es el nombre del contenedor a seleccionar.
Valores devueltos: Devuelve la array de elementos que se encuentra, de lo contrario, se devuelve nulo.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1: cuando la selección no es nula.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div>Geeks for geeks
<b>This text is in bold</b>
<b>This text is also in bold</b>
</div>
<div><b>Geeks for geeks</b></div>
<div>Some text</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let selection=d3.selectAll("div").selectAll("b");
console.log(selection.nodes());
console.log(selection.node());
</script>
</body>
</html>
Producción:
Ejemplo 2: Cuando la selección es nula.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
</style>
<body>
<div>Geeks for geeks
<b>This text is in bold</b>
<b>This text is also in bold</b>
</div>
<div><b>Geeks for geeks</b></div>
<div>Some text</div>
<script src =
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let selection=d3.selectAll("div").selectAll("br");
console.log(selection.nodes());
console.log(selection.node());
</script>
</body>
</html>
Producción:
