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:
