D3.js mouse() Function

Last Updated : 17 Oct, 2024

The d3.mouse() function in D3.js is used to return the x-coordinate and y-coordinate of the current event when clicked.

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.

Example1: Below examples illustrate the D3.js mouse() function In JavaScript:

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");
        let 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>