For the marker, could we just get the mouse position directly to place the circle like this? updateMarker = (e,d) => { let tooltipMarker = d3.select('#tooltipMarker'); tooltipMarker.attr("cx", e.layerX) .attr("cy", e.layerY) .attr("fill", colorScale(d[0])) .style('visibility', 'visible'); }

In this case, both solutions are almost equivalent, and probably yours is more simple (so better). The proposed solution is more similar to what I did on version 2, which is in fact a much better option than this initial version.