Better hover for choropleth traces #1401
Conversation
- 🔪 geo container <div> - 🔪 geoimages <g> and (now obsolete) toSVG method
- similar to 'extraText', to allow trace modules' hoverPoints methods to override the 'name' hover label content.
- only export one method (like all other trace plot method) - add hoverPoints and eventData methods making choropleth hover user Fx.hover logic (just like scattergeo) - set 'choroplethHoverPt' field on geo instance on mouseover choropleth location pt, use this to make hover info in hoverPoints
- now that choropleth hover geos through Fx.hover, `hovermode: false` for geo no longer needs a special handler.
| @@ -2762,11 +2762,6 @@ function makePlotFramework(gd) { | |||
| fullLayout._glcontainer.enter().append('div') | |||
| .classed('gl-container', true); | |||
|
|
|||
| fullLayout._geocontainer = fullLayout._paperdiv.selectAll('.geo-container') | |||
| .data([0]); | |||
| fullLayout._geocontainer.enter().append('div') | |||
There was a problem hiding this comment.
An artefact from the first iteration back in July 2015 - where I found that Fx.lonehover worked best off a plain <div> (fast-forward today, this not longer the case).
| @@ -2810,6 +2805,9 @@ function makePlotFramework(gd) { | |||
| // single ternary layer for the whole plot | |||
| fullLayout._ternarylayer = fullLayout._paper.append('g').classed('ternarylayer', true); | |||
|
|
|||
| // single geo layer for the whole plot | |||
| fullLayout._geolayer = fullLayout._paper.append('g').classed('geolayer', true); | |||
There was a problem hiding this comment.
Now geo lies side-by-side with other SVG subplot types 🎉
| // to simulate the 'zoomon' event | ||
| Fx.loneUnhover(geo.hoverContainer); | ||
| .on('mouseover', function(pt) { | ||
| geo.choroplethHoverPt = pt; |
There was a problem hiding this comment.
pt here is essentially the calcdata item corresponding to the feature under the mouse cursor. geo.choroplethHoverPt is then used in the hoverPoints method.
Alternatively, we could have looped over all the features and use something like turf-inside which is more similar to the hoveron: 'fills' algorithm, but I thought this here sufficed.
| return Axes.tickText(axis, axis.c2l(val), 'hover').text; | ||
| } | ||
|
|
||
| if(hasIdAsNameLabel) pointData.nameOverride = pt.id; |
|
I can't notice any unwanted differences in the new baselines in c32d445 If anything, the new baselines appear to better clip the geo subplots: I wouldn't mind having another set of 👀 taking a look at this. |
|
Beautiful. Hover effects work better AND the code and svg structure is way simpler. 🌟 💯 🌟 I'm not worried about the baseline image differences - seems like just subpixel rounding differences based on the different nesting structure. There does seem to be a little bit of overflow in the clipping, may be worthwhile taking a 🔍 to it at some point but doesn't need to be now - I don't think the effect changed with this PR, it just got a subpixel shift. 💃 |
fixes #1333
and cleans up a bunch of geo-only code paths and logic.