Learn D3.js

Handling events

The on() method is used to handle events, and it can be called from any selection. The first parameter is a standard JavaScript event name string (such as click or mouseover), and the second parameter is the handler function that will execute when the event happens.

The following code obtains a selection containing all button objects and attaches an event handler to all of them. It obtains the id of the button that was clicked and uses it to change the current chart by assigning a corresponding object from the charts array. After changing the current chart, it calls the draw() function, which will update the chart. This code should be placed in a global context, since it only needs to run once:

d3.selectAll("button") .on("click", ...