Setting up interactions in React, and wrapping up
We wrap up by talking about how to add interactions and look at the completed code for a Timeline, Scatter plot, and Histogram.
Setting up interactions#
In a production app, we would next want to define our interactions. Most charts could benefit from a tooltip - this could be implemented in various ways.
We could add a chart listener rect to our
Chartcomponent that would sit on top of its
children. We could listen to all mouse events and use
d3.leastIndex()to find the closest point and position the tooltip using our scales (similar to our timeline example in Module 5).
We could add a boolean property to
Linethat creates the listener rect, tying the tooltip to a specific data element. This might be beneficial if we have many types of charts that need different types of listeners (like our scatter plot example in Module 5).
Now that we've created some basic chart components and a Timeline component, we have a general idea of how to weave React.js and d3.js together. The general idea is to use React.js for any DOM rendering and d3.js as a utility library.