Open In App

D3.js clientPoint() Function

Improve
Improve
Like Article
Like
Save
Share
Report

The d3.clientPoint() is used to return the x coordinate and y coordinate of the particular event attached to a particular container or HTML tag.

Syntax:

d3.clientPoint(container, event);

Parameters: This function accepts two parameters as mentioned above and described below. 

  • container: The container may be HTML or SVG container.
  • event: The event can be any event such as touch, click, hover, etc.

Return Values: It returns an array of coordinates x and y.

Below examples illustrate the D3.js clientPoint() 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 clientPoint() 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");
            btn.addEventListener("click", createDot);
            var div = d3.select("div").node();
            function createDot(event) {
                let pos = d3.clientPoint(div, event);
                console.log(pos);
            }
        </script>
    </body>
</html>


Output: After clicking on the green box the output appears in the console window.

Example 2: White dots are created wherever click event occur.

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 clientPoint() Function</title>
    </head>
    <style>
        svg {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
    <body>
        <svg></svg>
        <script src=
        </script>
        <script src=
        </script>
        <script>
            let btn = document.querySelector("svg");
            btn.addEventListener("click", createDot);
            var svg = d3.select("svg").node();
            function createDot(event) {
                let pos = d3.clientPoint(svg, event);
                console.log(pos);
                d3.select(svg).append("circle").attr("fill", "white")
                  .attr("r", 5).attr("cx", pos[0]).attr("cy", pos[1]);
            }
        </script>
    </body>
</html>


Output:

Before Clicking the SVG container:

After clicking the SVG container:



Last Updated : 21 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads