Showing and hiding the tooltip

We need a small chunk of logic to tell our app when to show and when to hide the tooltip. With SVG, this logic is usually straightforward, as we can leverage mouseover and mouseout. With Canvas, we only really have mousemove on the entire Canvas. So, we build our own mouseover and mouseout logic. We start in the mousemove handler called highlightPicking():

function highlightPicking() {  // Here, you find the country index and store it in pickedColor  // and you check if the user’s mouse is in the globe or not with inGlobe  selected = inGlobe && pickedColor[3] === 255 ? pickedColor[0] : false;  requestAnimationFrame(function() {    renderScene(countries, selected);  });  var country = countries.features[selected]; if ...

Get Learning D3.js 5 Mapping - Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.