d3.pointer() returns an event’s horizontal and vertical coordinates relative to a target. It belongs to D3’s d3-selection module and is useful for positioning visualization elements from mouse interaction. section 7.3.2 section 7.5
Use the returned coordinate array to connect pointer movement with a chart:
- Attach a mousemove listener to the relevant SVG paths. section 7.3.2
- Read the horizontal coordinate with d3.pointer(e)[0]. section 7.3.2
Following the pointer with a tooltip
d3.selectAll(".areas-container path").on("mousemove", e => { const xPosition = d3.pointer(e)[0]; d3.select(".tooltip").attr("transform", `translate(${xPosition}, 0)`); });
