diff --git a/src/plots/geo/geo.js b/src/plots/geo/geo.js
index 2472ab9956e..ed0c5a9ac0c 100644
--- a/src/plots/geo/geo.js
+++ b/src/plots/geo/geo.js
@@ -15,8 +15,6 @@ var d3 = require('d3');
var Color = require('../../components/color');
var Drawing = require('../../components/drawing');
-
-var Plots = require('../../plots/plots');
var Axes = require('../../plots/cartesian/axes');
var addProjectionsToD3 = require('./projections');
@@ -139,6 +137,20 @@ proto.plot = function(geoData, fullLayout, promises) {
// to avoid making multiple request while streaming
};
+// filter out non-visible trace
+// geo plot routine use the classic join/enter/exit pattern to update traces
+function filterData(dataIn) {
+ var dataOut = [];
+
+ for(var i = 0; i < dataIn.length; i++) {
+ var trace = dataIn[i];
+
+ if(trace.visible === true) dataOut.push(trace);
+ }
+
+ return dataOut;
+}
+
proto.onceTopojsonIsLoaded = function(geoData, geoLayout) {
var traceData = {};
@@ -153,8 +165,10 @@ proto.onceTopojsonIsLoaded = function(geoData, geoLayout) {
var traceKeys = Object.keys(traceData);
for(var j = 0; j < traceKeys.length; j++){
- var traceKey = traceKeys[j];
- Plots.getModule(traceKey).plot(this, traceData[traceKey], geoLayout);
+ var moduleData = traceData[traceKeys[j]];
+ var _module = moduleData[0]._module;
+
+ _module.plot(this, filterData(moduleData), geoLayout);
}
this.render();
diff --git a/src/traces/choropleth/plot.js b/src/traces/choropleth/plot.js
index 771b090daba..15a59206869 100644
--- a/src/traces/choropleth/plot.js
+++ b/src/traces/choropleth/plot.js
@@ -68,7 +68,7 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
var gChoroplethTraces = gChoropleth
.selectAll('g.trace.choropleth')
- .data(choroplethData);
+ .data(choroplethData, function(trace) { return trace.uid; });
gChoroplethTraces.enter().append('g')
.attr('class', 'trace choropleth');
@@ -77,8 +77,6 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
gChoroplethTraces
.each(function(trace) {
- if(trace.visible !== true) return;
-
var cdi = plotChoropleth.calcGeoJSON(trace, geo.topojson),
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
eventDataFunc = makeEventDataFunc(trace);
diff --git a/src/traces/scattergeo/plot.js b/src/traces/scattergeo/plot.js
index eee16c1d477..8c16d3159b8 100644
--- a/src/traces/scattergeo/plot.js
+++ b/src/traces/scattergeo/plot.js
@@ -31,7 +31,7 @@ plotScatterGeo.calcGeoJSON = function(trace, topojson) {
var cdi = [],
hasLocationData = Array.isArray(trace.locations);
- var len, features, getLonLat, lonlat, locations, calcItem;
+ var len, features, getLonLat, locations;
if(hasLocationData) {
locations = trace.locations;
@@ -53,11 +53,11 @@ plotScatterGeo.calcGeoJSON = function(trace, topojson) {
}
for(var i = 0; i < len; i++) {
- lonlat = getLonLat(trace, i);
+ var lonlat = getLonLat(trace, i);
if(!lonlat) continue; // filter the blank points here
- calcItem = {
+ var calcItem = {
lon: lonlat[0],
lat: lonlat[1],
location: hasLocationData ? trace.locations[i] : null
@@ -104,7 +104,7 @@ function makeLineGeoJSON(trace) {
var N = trace.lon.length,
coordinates = new Array(N);
- for (var i = 0; i < N; i++) {
+ for(var i = 0; i < N; i++) {
coordinates[i] = [trace.lon[i], trace.lat[i]];
}
@@ -118,7 +118,7 @@ function makeLineGeoJSON(trace) {
plotScatterGeo.plot = function(geo, scattergeoData) {
var gScatterGeoTraces = geo.framework.select('.scattergeolayer')
.selectAll('g.trace.scattergeo')
- .data(scattergeoData);
+ .data(scattergeoData, function(trace) { return trace.uid; });
gScatterGeoTraces.enter().append('g')
.attr('class', 'trace scattergeo');
@@ -128,7 +128,8 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
// TODO add hover - how?
gScatterGeoTraces
.each(function(trace) {
- if(!subTypes.hasLines(trace) || trace.visible !== true) return;
+ if(!subTypes.hasLines(trace)) return;
+
d3.select(this)
.append('path')
.datum(makeLineGeoJSON(trace))
@@ -142,10 +143,7 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
showMarkers = subTypes.hasMarkers(trace),
showText = subTypes.hasText(trace);
- if((!showMarkers && !showText) || trace.visible !== true) {
- s.remove();
- return;
- }
+ if((!showMarkers && !showText)) return;
var cdi = plotScatterGeo.calcGeoJSON(trace, geo.topojson),
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
diff --git a/test/jasmine/tests/geo_interact_test.js b/test/jasmine/tests/geo_interact_test.js
index 2c811b33b5e..9b50914ca32 100644
--- a/test/jasmine/tests/geo_interact_test.js
+++ b/test/jasmine/tests/geo_interact_test.js
@@ -180,5 +180,43 @@ describe('Test geo interactions', function() {
});
});
+ describe('trace visibility toggle', function() {
+ function countTraces(type) {
+ return d3.selectAll('g.trace.' + type).size();
+ }
+
+ it('should toggle scattergeo elements', function(done) {
+ expect(countTraces('scattergeo')).toBe(1);
+ expect(countTraces('choropleth')).toBe(1);
+
+ Plotly.restyle(gd, 'visible', false, [0]).then(function() {
+ expect(countTraces('scattergeo')).toBe(0);
+ expect(countTraces('choropleth')).toBe(1);
+
+ Plotly.restyle(gd, 'visible', true, [0]).then(function() {
+ expect(countTraces('scattergeo')).toBe(1);
+ expect(countTraces('choropleth')).toBe(1);
+ done();
+ });
+ });
+ });
+
+ it('should toggle choropleth elements', function(done) {
+ expect(countTraces('scattergeo')).toBe(1);
+ expect(countTraces('choropleth')).toBe(1);
+
+ Plotly.restyle(gd, 'visible', false, [1]).then(function() {
+ expect(countTraces('scattergeo')).toBe(1);
+ expect(countTraces('choropleth')).toBe(0);
+
+ Plotly.restyle(gd, 'visible', true, [1]).then(function() {
+ expect(countTraces('scattergeo')).toBe(1);
+ expect(countTraces('choropleth')).toBe(1);
+ done();
+ });
+ });
+ });
+
+ });
});
});