La función selection.text() en d3.js se usa para establecer el contenido del texto en el valor especificado de los elementos seleccionados, por lo tanto, reemplaza cualquier elemento secundario existente. Si el valor que se da es constante, a todos los elementos se les dará ese valor constante.
Sintaxis:
selection.text([value]);
Parámetros: esta función toma solo un parámetro que se proporciona arriba y se describe a continuación:
- valor: Valor del contenido de texto a establecer.
Valores devueltos:
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>
<h1 style="color: green">GeeksforGeeks</h1>
<div>
<button>Click me</button>
</div>
<script>
function func() {
// Sets the text-content of the button
var chk = d3.select("button")
.text("This is the changed text");
var text = document.querySelector("button");
}
let btn = document.querySelector("button");
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">
<script src="https://d3js.org/d3.v4.min.js">
</script>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div style="background-color: green;
width: fit-content;
padding: 10px;
margin-top: 5px;" class="btn">
This text will be changed
</div>
<div style="background-color: green;
width: fit-content;
padding: 10px;
margin-top: 5px;" class="btn">
This text will be changed
</div><br>
<br>
<button class="Clickme">Change text</button>
<script>
function func() {
// Selecting all buttons and
// Setting the text content of the button
var chk = d3.selectAll(".btn")
.text("This text is changed");
var text = document.querySelector("button");
}
let btn = document.querySelector(".Clickme");
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:
