D3.js clientPoint() Function
The d3.clientPoint() is used to return the x coordinate and y coordinate of the particular event attached to a particular container or HTML tag.
Syntax:
d3.clientPoint(container, event);
Parameters: This function accepts two parameters as mentioned above and described below.
- container: The container may be HTML or SVG container.
- event: The event can be any event such as touch, click, hover, etc.
Return Values: It returns an array of coordinates x and y.
Below examples illustrate the D3.js clientPoint() function in JavaScript
Example1:
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 =
</ script >
< script src =
</ 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 >
|
Output: After clicking on the green box the output appears in the console window.
Example 2: White dots are created wherever click event occur.
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 =
</ script >
< script src =
</ 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 >
|
Output:
Before Clicking the SVG container:
After clicking the SVG container:
Last Updated :
21 Nov, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...