La función d3.mouse() en D3.js se usa para devolver la coordenada x y la coordenada y del evento actual. Si se hace clic en el evento, devuelve la posición x e y del clic.
Sintaxis:
d3.mouse(container);
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- contenedor: Es el nombre del contenedor o la etiqueta HTML a la que se adjunta el evento.
Valores devueltos: Devuelve el array de coordenadas x e y.
Los siguientes ejemplos ilustran la función mouse() de D3.js 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 mouse() Function</title>
</head>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div></div>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let btn = document.querySelector("div");
var div = d3.select("div");
div.on("click", createDot);
function createDot() {
// Using d3.mouse() function
let pos = d3.mouse(this);
console.log(pos);
}
</script>
</body>
</html>
Producció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"/>
<title>D3.js mouse() Function</title>
</head>
<style>
.div {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
div {
background-color: red;
width: 10px;
height: 10px;
}
</style>
<body>
<h2>click on the box</h2>
<div class="div"></div>
<script src=
"https://d3js.org/d3.v4.min.js">
</script>
<script src=
"https://d3js.org/d3-selection.v1.min.js">
</script>
<script>
let btn = document.querySelector("div");
var div = d3.select("div");
div.on("click", createDot);
function createDot() {
// Using d3.mouse() function
let pos = d3.mouse(this);
console.log(pos);
d3.select("div")
.append("div")
.style("background-color", "white")
.style("position", "absolute")
.style("margin-left", `${pos[0] - 10}px`)
.style("margin-right", `${pos[0] - 10}px`)
.style("margin-top", `${pos[1] - 10}px`)
.style("margin-bottom", `${pos[1] - 10}px`);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en la casilla:
Después de hacer clic en el cuadro:
