Description
If markers of different sizes overlap, scatter and scattergl show different hover labels. scatter includes the marker radius in the hover distance, and a smaller marker wins while the pointer is near its center (src/traces/scatter/hover.js). scattergl and splom measure only the distance to the marker center, so the marker drawn on top always wins. scatterpolargl inherits this through scattergl.
scattergl also uses a plain |dx| in x hovermode, but scatter changes the shape of dx inside the marker radius. That difference can rank close points differently.
This is a follow-up to #8077, which fixed ties between equal distances.
Steps to reproduce
- Open Plotly devtools
- Run this snippet in the browser devtools
Plotly.newPlot(gd, {
data: [
{ type: 'scatter', name: 'A', mode: 'markers', marker: { size: 6 }, x: [1], y: [0] },
{ type: 'scatter', name: 'B', mode: 'markers', marker: { size: 20 }, x: [1], y: [0] }
],
layout: { hovermode: 'closest' }
});
- Hover the center of the shared point
- Note that the label shows A
- Change both traces to
type: 'scattergl' and hover again
- Note that the label shows B
Notes
- A fix probably means sharing the scoring functions in
scatter/hover.js with scattergl and splom
- Each marker's radius can be taken from the sizes that
scattergl/convert.js already computes
- Large traces search a spatial tree within
hoverdistance of the pointer, so the search box also has to grow by the largest marker radius
- This would changed hover results for every WebGL plot with markers of different sizes, so we need to be careful about the blast radius
Description
If markers of different sizes overlap,
scatterandscatterglshow different hover labels.scatterincludes the marker radius in the hover distance, and a smaller marker wins while the pointer is near its center (src/traces/scatter/hover.js).scatterglandsplommeasure only the distance to the marker center, so the marker drawn on top always wins.scatterpolarglinherits this throughscattergl.scatterglalso uses a plain|dx|inxhovermode, butscatterchanges the shape ofdxinside the marker radius. That difference can rank close points differently.This is a follow-up to #8077, which fixed ties between equal distances.
Steps to reproduce
type: 'scattergl'and hover againNotes
scatter/hover.jswithscatterglandsplomscattergl/convert.jsalready computeshoverdistanceof the pointer, so the search box also has to grow by the largest marker radius