Learning D3.js 5 Mapping - Second Edition

Picking the values

At this point, you have all tools at hands to implement a hover. Now, you will need to make it happen. To wire it all up, you need to do the following steps:

1. Listen to mousemoves on the main Canvas.
2. Translate these coordinates to positions on the hidden Canvas.
3. Pick the color from that position.
4. Strip out the color value that represents the data array index for your data.
5. Lean back and think of ways to use it.

Listening on mousemove is easy; you just need to perform the following command:

canvas.on('mousemove', highlightPicking);

Done. The first thing we will do in highlightPicking() is translate the mouse position on the main Canvas to the coordinates on the hidden Canvas:

function highlightPicking() { var pos = d3.mouse(this); ...