D3.js selection.on() Function - GeeksforGeeks

13 Aug, 2020
The d3.selection.on() function in D3.js is used to add a particular event listener to an element. An event may be a string of event type click, mouseover, etc.
Syntax:
selection.on(typenames[, listener[, options]])

Parameters: This function accepts two parameters as mentioned above and described below:
Typename Listener: It is a string event type such as click, submits, etc.
Options: This is an optional object that may tell about the special characteristics of the listener.
Note: If a listener is not specified then it returns the currently assigned event for the particular element.
Return Values: This function returns the object.
Below examples illustrate the D3.js selection.on() 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 selection.on() Function</title>    </head>    <style>        li {            background-color: green;            color: #ffffff;            width: 50px;            margin-bottom: 5px;            padding: 20px;            height: 40px;        }        li:hover {            cursor: pointer;            opacity: 0.8;        }    </style>    <body>        <ul>            <li>Geeks for geeks</li>            <li>GEEKS FOR GEEKS</li>        </ul>        <script src="https://d3js.org/d3.v4.min.js">        </script>        <script src="https://d3js.org/d3-selection.v1.min.js">        </script>        <script>            let li = d3.select("li");            let x = li.on("click", () => {                console.log("Clicked");            });        </script>    </body></html>
Output:
Before clicking on the box:
After clicking on the box:
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 selection.on() Function</title>    </head>    <style>        li {            background-color: green;            color: #ffffff;            width: 100px;            margin-bottom: 5px;            padding: 20px;            height: 50px;        }        li:hover {            cursor: pointer;            opacity: 0.8;        }    </style>    <body>        <ul>            <li>Geeks for geeks</li>        </ul>        <script src="https://d3js.org/d3.v4.min.js">        </script>        <script src="https://d3js.org/d3-selection.v1.min.js">        </script>        <script>            let li = d3.select("li");            let x = li.on("mouseover", () => {                let li = document.querySelector("li");                li.innerHTML = "mouseOver event";            });            // When cursor moves out of the li tag            x = li.on("mouseout", () => {                let li = document.querySelector("li");                li.innerHTML = "Geeks for geeks";            });        </script>    </body></html>
Output:
On mouseover:
On mouseout:
D3.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
Remove elements from a JavaScript Array
Roadmap to Become a Web Developer in 2022
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Installation of Node.js on Linux