La función d3.selection.on() en D3.js se usa para agregar un detector de eventos particular a un elemento. Un evento puede ser una string de eventos de tipo clic, mouseover, etc.
Sintaxis:
selection.on(typenames[, listener[, options]])
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación:
- Typename Listener: es un tipo de evento de string como hacer clic, enviar, etc.
- Opciones: este es un objeto opcional que puede informar sobre las características especiales del oyente.
Nota: si no se especifica un oyente, devuelve el evento actualmente asignado para el elemento en particular.
Valores devueltos: esta función devuelve el objeto.
Los siguientes ejemplos ilustran la función D3.js selection.on() en JavaScript:
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.on() Function</title>
</head>
<style>
li {
background-color: green;
color: #ffffff;
width: 50px;
margin-bottom: 5px;
padding: 20px;
height: 40px;
}
li:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
<body>
<ul>
<li>Geeks for geeks</li>
<li>GEEKS FOR GEEKS</li>
</ul>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let li = d3.select("li");
let x = li.on("click", () => {
console.log("Clicked");
});
</script>
</body>
</html>
Producción:
Antes de hacer clic en la casilla:
Después de hacer clic en el cuadro:
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.on() Function</title>
</head>
<style>
li {
background-color: green;
color: #ffffff;
width: 100px;
margin-bottom: 5px;
padding: 20px;
height: 50px;
}
li:hover {
cursor: pointer;
opacity: 0.8;
}
</style>
<body>
<ul>
<li>Geeks for geeks</li>
</ul>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let li = d3.select("li");
let x = li.on("mouseover", () => {
let li = document.querySelector("li");
li.innerHTML = "mouseOver event";
});
// When cursor moves out of the li tag
x = li.on("mouseout", () => {
let li = document.querySelector("li");
li.innerHTML = "Geeks for geeks";
});
</script>
</body>
</html>
Producción:
El ratón por encima:
En mouseout:
