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:
