Data Visualization with D3 and AngularJS

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() ...