The d3.mouse() function in D3.js is used to return the x-coordinate and y-coordinate of the current event. If the event is clicked then it returns the x and y position of the click.
Syntax:
d3.mouse(container);
Parameters: This function accepts a single parameter as mentioned above and described below:
- container: It is the name of the container or the HTML tag to which the event is attached.
Return Values: It returns the array of coordinates x and y.
Below examples illustrate the D3.js mouse() 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 mouse() 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");
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 >
|
Output:
Example 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 =
</ script >
< script src =
</ 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 >
|
Output:
Before clicking the box:
After clicking the box: