Chapter 10. Interactivity
Now that youâre a pro at data updates, transitions, and motion, letâs incorporate true interactivity.
Binding Event Listeners
Say what? I know, I know. First, we bound data, which was weird enough. And now Iâm talking about binding event listeners?
As explained in Chapter 9, JavaScript uses an event model in which âeventsâ are triggered by things happening, such as new input from the user, provided via a keyboard, mouse, or touch screen. Most of the time, events are being triggered constantly, left and rightâitâs just that nobody is listening for them, so they are ignored.
To make our pieces interactive, we define chunks of code that listen for specific events being triggered on specific DOM elements. In Chapter 9, we used the following code:
d3
.
select
(
"p"
)
.
on
(
"click"
,
function
()
{
//Do something on click
});
This binds an event listener to the p
paragraph element. The listener happens to be listening for the click
event, which is the JavaScript event triggered when the user clicks the mouse on that p
element. (D3 doesnât use custom event names, although you can define your own. For the sake of supporting existing standards, D3 recognizes all the standard JavaScript events, such as mouseover
and click
. The events supported vary somewhat by browser. Peter-Paul Kochâs event compatibility tables are a useful reference.)
This gets at one of the nuances of JavaScriptâs event model, which is that events donât happen in a vacuum. Rather, ...
Get Interactive Data Visualization for the Web, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.