The on()
method adds an event listener to all selected DOM elements.
Syntax :
d3.selection.on(type[, listener[, capture]]);
The first parameter is an event type as string such as "click", "mouseover" etc. The second parameter is a callback function which will be executed when an event occurs and the third optional parameter capture flag may be specified.
The following table lists important event handling method and objects.
Event Methods |
Description |
selection.on() |
Add or remove event listeners to capture event types like click, mouseover, mouseout etc. |
selection.dispatch() |
Captures event types like click, mouseover, mouseout. Typenames is the eventname, listener is the event listener |
d3.event |
Event object to access standard event fields such as timestamp or methods like preventDefault |
d3.mouse(container) |
Gets the x and y coordinates of the current mouse position in the specified DOM element. |
d3.touch() |
Gets the touch coordinates to a container |
Example : Event Handling
<!doctype html>
<html>
<head>
<style>
div {
height: 100px;
width: 100px;
background-color: steelblue;
margin: 5px;
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div> </div>
<script>
d3.selectAll("div")
.on("mouseover", function(){
d3.select(this)
.style("background-color", "orange");
// Get current event info
console.log(d3.event);
// Get x & y co-ordinates
console.log(d3.mouse(this));
})
.on("mouseout", function(){
d3.select(this)
.style("background-color", "steelblue")
});
</script>
</body>
</html>