La función selection.select() en d3.js se usa para seleccionar el primer elemento descendiente que coincide con el selector dado. Si no se encuentra el elemento, la función devuelve un valor nulo.
Sintaxis:
selection.select(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 de los contenedores HTML o la etiqueta SVG.
Valores devueltos: Devuelve un elemento si se encuentra, de lo contrario se devuelve nulo.
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>Document</title>
</head>
<style>
div{
background-color: green;
margin-bottom: 5px;
padding: 10px;
width: fit-content;
}
</style>
<body>
<div>Some text</div>
<div><b>Geeks for geeks</b></div>
<div>Geeks for geeks<b>This is from b tag</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").select("b").node()
console.log(selection)
</script>
</body>
</html>
Producción:
Ejemplo 2: cuando no se encuentra el elemento, se devuelve nulo.
html
<!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>
div{
background-color: green;
margin-bottom: 5px;
padding: 10px;
width: fit-content;
}
</style>
<body>
<div>Some text</div>
<div><b>Geeks for geeks</b></div>
<div>Geeks for geeks<b>This is from b tag</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").select("p");
console.log(selection.nodes());
console.log(selection.node());
</script>
</body>
</html>
Producción:
