Inspired by @Fil’s Multitouch done right I wanted to take a pop at using pointer events. However, I’ve not quite sussed it.
In this notebook I’ve added a tooltip to the D3 bar chart example. It works fine on my computer, but on my phone it behaves unpredictably. The intended behaviour is that the tooltip content updates as the user scrolls over the bars, but this doesn’t always work, as you can see below.
Recorded on iOS 13.6, which appears to be supported.
Any tips on how to get this working would be gratefully received! The relevant code appears at the bottom of the chart cell. Pasted here for reference.
const tooltip = new Tooltip();
bars
.on("touchstart", event => event.preventDefault())
.on("pointerover", (_, d) => tooltip.show(d))
.on("pointermove", event => tooltip.position(...d3.pointer(event)))
.on("pointerleave", () => tooltip.hide())
svg.append(() => tooltip.node);
More broadly, I’m keen to learn what the best practice is for cross-platform interactivity. From what I can see the majority of interactive D3 examples still use mouse and touch events.
