Summary

In this chapter, you learned various interaction techniques to enhance the usability of charts and to make them fully accessible.

First, we saw the concept of event listeners and events in JavaScript and how they are used with D3.js. We used the .on(event, callback) method to attach event callbacks directly on selection of elements. All the details about the triggered event are available in the d3.event object. When dealing with relative coordinates, the d3.mouse(container) function becomes quite handy because it returns the mouse coordinates relative to the container.

Then, we implemented a simple cursor for the chart directive that strictly follows the mouse position. We can easily compute the values on the axis by using the scale.invert() method. In the second cursor implementation, we also needed to compute the nearest value of the dataset to our current position on the axis. To achieve this, we used the d3.bisector() method with an accessor for the x value of the dataset values...