I thought adding a tooltip to a line chart will be easy since I already learned to add a tooltip to a scatter plot. However, this process is more complicated than I thought. The reason is that each dot in the scatter plot consists of only one circle, but the line chart draws the line between two data points. Figuring out which data point our mouse is hovering needs a little bit more work. The idea is that we should show the information of a data point to which our mouse is closest. We will use “d3.bisect()” function to achieve this.
I found a very nice D3 Line Chart post to explain how it works. I basically followed his steps and modified the variable name.
Qichun Dai 