El d3.clientPoint() se usa para devolver la coordenada x y la coordenada y del evento en particular adjunto a un contenedor o etiqueta HTML en particular.
Sintaxis:
d3.clientPoint(container, event);
Parámetros: esta función acepta dos parámetros, como se mencionó anteriormente y se describe a continuación.
- contenedor: El contenedor puede ser un contenedor HTML o SVG.
- evento: el evento puede ser cualquier evento, como tocar, hacer clic, pasar el mouse, etc.
Valores de retorno: Devuelve una array de coordenadas x e y.
Los siguientes ejemplos ilustran la función D3.js clientPoint() 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 clientPoint() 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");
btn.addEventListener("click", createDot);
var div = d3.select("div").node();
function createDot(event) {
let pos = d3.clientPoint(div, event);
console.log(pos);
}
</script>
</body>
</html>
Salida: después de hacer clic en el cuadro verde, la salida aparece en la ventana de la consola.
Ejemplo 2: se crean puntos blancos dondequiera que ocurra un evento de clic.
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 clientPoint() Function</title>
</head>
<style>
svg {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<svg></svg>
<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("svg");
btn.addEventListener("click", createDot);
var svg = d3.select("svg").node();
function createDot(event) {
let pos = d3.clientPoint(svg, event);
console.log(pos);
d3.select(svg).append("circle").attr("fill", "white")
.attr("r", 5).attr("cx", pos[0]).attr("cy", pos[1]);
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el contenedor SVG:
Después de hacer clic en el contenedor SVG :
