D3.js selection.on() Function

Last Updated : 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>