Skip to content

Better hover for choropleth traces #1401

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 27, 2017
Merged

Better hover for choropleth traces #1401

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bdbb3d6
replace nested geo SVG with cliped <g geolayer> in main SVG
etpinard Feb 21, 2017
ec6c1b1
add handler for 'nameOverride' field in pointData
etpinard Feb 21, 2017
8c29dfb
refactor Choropleth plot
etpinard Feb 21, 2017
b461dc1
rm (now useless) Geo.updateFx method
etpinard Feb 21, 2017
919fe42
no need to manually clear hover labels on zoom reset
etpinard Feb 21, 2017
c32d445
new geo baselines
etpinard Feb 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
.classed('geo-container', true);

fullLayout._paperdiv.selectAll('.main-svg').remove();

fullLayout._paper = fullLayout._paperdiv.insert('svg', ':first-child')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Expand Down Expand Up @@ -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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now geo lies side-by-side with other SVG subplot types 🎉


// upper shape layer
// (only for shapes to be drawn above the whole plot, including subplots)
var layerAbove = fullLayout._paper.append('g')
Expand All @@ -2824,7 +2822,6 @@ function makePlotFramework(gd) {

// fill in image server scrape-svg
fullLayout._glimages = fullLayout._paper.append('g').classed('glimages', true);
fullLayout._geoimages = fullLayout._paper.append('g').classed('geoimages', true);

// lastly info (legend, annotations) and hover layers go on top
// these are in a different svg element normally, but get collapsed into a single
Expand Down
81 changes: 29 additions & 52 deletions src/plots/geo/geo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ var createGeoZoom = require('./zoom');
var createGeoZoomReset = require('./zoom_reset');
var constants = require('./constants');

var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
var topojsonUtils = require('../../lib/topojson_utils');
var topojsonFeature = require('topojson-client').feature;

Expand All @@ -39,8 +38,6 @@ function Geo(options, fullLayout) {
this.container = options.container;
this.topojsonURL = options.topojsonURL;

this.hoverContainer = null;

this.topojsonName = null;
this.topojson = null;

Expand All @@ -54,8 +51,6 @@ function Geo(options, fullLayout) {
this.zoom = null;
this.zoomReset = null;

this.xaxis = null;
this.yaxis = null;

this.makeFramework();
this.updateFx(fullLayout.hovermode);
Expand Down Expand Up @@ -232,38 +227,30 @@ proto.makePath = function() {
this.path = d3.geo.path().projection(this.projection);
};

/*
* <div this.container>
* <div this.geoDiv>
* <svg this.hoverContainer>
* <svg this.framework>
*/
proto.makeFramework = function() {
var geoDiv = this.geoDiv = d3.select(this.container).append('div');
geoDiv
.attr('id', this.id)
.style('position', 'absolute');

// only choropleth traces use this,
// scattergeo traces use Fx.hover and fullLayout._hoverlayer
var hoverContainer = this.hoverContainer = geoDiv.append('svg');
hoverContainer
.attr(xmlnsNamespaces.svgAttrs)
.style({
'position': 'absolute',
'z-index': 20,
'pointer-events': 'none'
});

var framework = this.framework = geoDiv.append('svg');
var fullLayout = this.graphDiv._fullLayout;
var clipId = 'clip' + fullLayout._uid + this.id;

var defGroup = fullLayout._defs.selectAll('g.clips')
.data([0]);
defGroup.enter().append('g')
.classed('clips', true);

var clipDef = this.clipDef = defGroup.selectAll('#' + clipId)
.data([0]);

clipDef.enter().append('clipPath').attr('id', clipId)
.append('rect');

var framework = this.framework = d3.select(this.container).append('g');

framework
.attr(xmlnsNamespaces.svgAttrs)
.attr({
'position': 'absolute',
'preserveAspectRatio': 'none'
});
.attr('class', 'geo ' + this.id)
.style('pointer-events', 'all')
.call(Drawing.setClipUrl, clipId);

framework.append('g').attr('class', 'bglayer')
framework.append('g')
.attr('class', 'bglayer')
.append('rect');

framework.append('g').attr('class', 'baselayer');
Expand All @@ -274,8 +261,6 @@ proto.makeFramework = function() {
// N.B. disable dblclick zoom default
framework.on('dblclick.zoom', null);

// TODO use clip paths instead of nested SVG

this.xaxis = { _id: 'x' };
this.yaxis = { _id: 'y' };
};
Expand All @@ -286,28 +271,20 @@ proto.adjustLayout = function(geoLayout, graphSize) {
var left = graphSize.l + graphSize.w * domain.x[0] + geoLayout._marginX,
top = graphSize.t + graphSize.h * (1 - domain.y[1]) + geoLayout._marginY;

this.geoDiv.style({
left: left + 'px',
top: top + 'px',
width: geoLayout._width + 'px',
height: geoLayout._height + 'px'
});
Drawing.setTranslate(this.framework, left, top);

this.hoverContainer.attr({
var dimsAttrs = {
x: 0,
y: 0,
width: geoLayout._width,
height: geoLayout._height
});
};

this.framework.attr({
width: geoLayout._width,
height: geoLayout._height
});
this.clipDef.select('rect')
.attr(dimsAttrs);

this.framework.select('.bglayer').select('rect')
.attr({
width: geoLayout._width,
height: geoLayout._height
})
.attr(dimsAttrs)
.call(Color.fill, geoLayout.bgcolor);

this.xaxis._offset = left;
Expand Down
30 changes: 3 additions & 27 deletions src/plots/geo/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,11 @@ exports.plot = function plotGeo(gd) {
geoCalcData = Plots.getSubplotCalcData(calcData, 'geo', geoId),
geo = fullLayout[geoId]._subplot;

// If geo is not instantiated, create one!
if(!geo) {
geo = new Geo({
id: geoId,
graphDiv: gd,
container: fullLayout._geocontainer.node(),
container: fullLayout._geolayer.node(),
topojsonURL: gd._context.topojsonURL
},
fullLayout
Expand All @@ -74,31 +73,8 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
var oldGeo = oldFullLayout[oldGeoKey]._subplot;

if(!newFullLayout[oldGeoKey] && !!oldGeo) {
oldGeo.geoDiv.remove();
oldGeo.framework.remove();
oldGeo.clipDef.remove();
}
}
};

exports.toSVG = function(gd) {
var fullLayout = gd._fullLayout,
geoIds = Plots.getSubplotIds(fullLayout, 'geo'),
size = fullLayout._size;

for(var i = 0; i < geoIds.length; i++) {
var geoLayout = fullLayout[geoIds[i]],
domain = geoLayout.domain,
geoFramework = geoLayout._subplot.framework;

geoFramework.attr('style', null);
geoFramework
.attr({
x: size.l + size.w * domain.x[0] + geoLayout._marginX,
y: size.t + size.h * (1 - domain.y[1]) + geoLayout._marginY,
width: geoLayout._width,
height: geoLayout._height
});

fullLayout._geoimages.node()
.appendChild(geoFramework.node());
}
};
2 changes: 1 addition & 1 deletion test/jasmine/tests/geo_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ describe('Test geo interactions', function() {
}

function countGeos() {
return d3.select('div.geo-container').selectAll('div').size();
return d3.select('g.geolayer').selectAll('.geo').size();
}

function countColorBars() {
Expand Down