D3.js mouse() Function - GeeksforGeeks

13 Aug, 2020
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="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");            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="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");            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:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?