Skip to content

Commit 3bcd249

Browse files
etpinardetpinard
committed
Merge pull request #324 from plotly/flat-scattergeo
Better geo streaming
2 parents c735931 + 731ff1b commit 3bcd249

File tree

3 files changed

+350
-127
lines changed

3 files changed

+350
-127
lines changed

‎src/traces/choropleth/plot.js

Lines changed: 44 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -75,50 +75,51 @@ plotChoropleth.plot = function(geo, choroplethData, geoLayout) {
7575

7676
gChoroplethTraces.exit().remove();
7777

78-
gChoroplethTraces
79-
.each(function(trace) {
80-
var cdi = plotChoropleth.calcGeoJSON(trace, geo.topojson),
81-
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
82-
eventDataFunc = makeEventDataFunc(trace);
83-
84-
function handleMouseOver(pt, ptIndex) {
85-
if(!geo.showHover) return;
86-
87-
var xy = geo.projection(pt.properties.ct);
88-
cleanHoverLabelsFunc(pt);
89-
90-
Fx.loneHover({
91-
x: xy[0],
92-
y: xy[1],
93-
name: pt.nameLabel,
94-
text: pt.textLabel
95-
}, {
96-
container: geo.hoverContainer.node()
97-
});
78+
gChoroplethTraces.each(function(trace) {
79+
var cdi = plotChoropleth.calcGeoJSON(trace, geo.topojson),
80+
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
81+
eventDataFunc = makeEventDataFunc(trace);
82+
83+
function handleMouseOver(pt, ptIndex) {
84+
if(!geo.showHover) return;
85+
86+
var xy = geo.projection(pt.properties.ct);
87+
cleanHoverLabelsFunc(pt);
88+
89+
Fx.loneHover({
90+
x: xy[0],
91+
y: xy[1],
92+
name: pt.nameLabel,
93+
text: pt.textLabel
94+
}, {
95+
container: geo.hoverContainer.node()
96+
});
97+
98+
geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
99+
}
98100

99-
geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
100-
}
101-
102-
function handleClick(pt, ptIndex) {
103-
geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
104-
}
105-
106-
d3.select(this)
107-
.selectAll('path.choroplethlocation')
108-
.data(cdi)
109-
.enter().append('path')
110-
.attr('class', 'choroplethlocation')
111-
.on('mouseover', handleMouseOver)
112-
.on('click', handleClick)
113-
.on('mouseout', function() {
114-
Fx.loneUnhover(geo.hoverContainer);
115-
})
116-
.on('mousedown', function() {
117-
// to simulate the 'zoomon' event
118-
Fx.loneUnhover(geo.hoverContainer);
119-
})
120-
.on('mouseup', handleMouseOver); // ~ 'zoomend'
121-
});
101+
function handleClick(pt, ptIndex) {
102+
geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
103+
}
104+
105+
var paths = d3.select(this).selectAll('path.choroplethlocation')
106+
.data(cdi);
107+
108+
paths.enter().append('path')
109+
.classed('choroplethlocation', true)
110+
.on('mouseover', handleMouseOver)
111+
.on('click', handleClick)
112+
.on('mouseout', function() {
113+
Fx.loneUnhover(geo.hoverContainer);
114+
})
115+
.on('mousedown', function() {
116+
// to simulate the 'zoomon' event
117+
Fx.loneUnhover(geo.hoverContainer);
118+
})
119+
.on('mouseup', handleMouseOver); // ~ 'zoomend'
120+
121+
paths.exit().remove();
122+
});
122123

123124
// some baselayers are drawn over choropleth
124125
gBaseLayerOverChoropleth.selectAll('*').remove();

‎src/traces/scattergeo/plot.js

Lines changed: 85 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -125,99 +125,101 @@ plotScatterGeo.plot = function(geo, scattergeoData) {
125125

126126
gScatterGeoTraces.exit().remove();
127127

128-
// TODO add hover - how?
129-
gScatterGeoTraces
130-
.each(function(trace) {
131-
if(!subTypes.hasLines(trace)) return;
128+
// TODO find a way to order the inner nodes on update
129+
gScatterGeoTraces.selectAll('*').remove();
132130

133-
d3.select(this)
134-
.append('path')
135-
.datum(makeLineGeoJSON(trace))
136-
.attr('class', 'js-line');
137-
});
131+
gScatterGeoTraces.each(function(trace) {
132+
var s = d3.select(this);
138133

139-
gScatterGeoTraces.append('g')
140-
.attr('class', 'points')
141-
.each(function(trace) {
142-
var s = d3.select(this),
143-
showMarkers = subTypes.hasMarkers(trace),
144-
showText = subTypes.hasText(trace);
145-
146-
if((!showMarkers && !showText)) return;
147-
148-
var cdi = plotScatterGeo.calcGeoJSON(trace, geo.topojson),
149-
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
150-
eventDataFunc = makeEventDataFunc(trace);
151-
152-
var hoverinfo = trace.hoverinfo,
153-
hasNameLabel = (
154-
hoverinfo === 'all' ||
155-
hoverinfo.indexOf('name') !== -1
156-
);
157-
158-
function handleMouseOver(pt, ptIndex) {
159-
if(!geo.showHover) return;
160-
161-
var xy = geo.projection([pt.lon, pt.lat]);
162-
cleanHoverLabelsFunc(pt);
163-
164-
Fx.loneHover({
165-
x: xy[0],
166-
y: xy[1],
167-
name: hasNameLabel ? trace.name : undefined,
168-
text: pt.textLabel,
169-
color: pt.mc || (trace.marker || {}).color
170-
}, {
171-
container: geo.hoverContainer.node()
172-
});
173-
174-
geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
175-
}
176-
177-
function handleClick(pt, ptIndex) {
178-
geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
179-
}
180-
181-
if(showMarkers) {
182-
s.selectAll('path.point')
183-
.data(cdi)
184-
.enter().append('path')
185-
.attr('class', 'point')
186-
.on('mouseover', handleMouseOver)
187-
.on('click', handleClick)
188-
.on('mouseout', function() {
189-
Fx.loneUnhover(geo.hoverContainer);
190-
})
191-
.on('mousedown', function() {
192-
// to simulate the 'zoomon' event
193-
Fx.loneUnhover(geo.hoverContainer);
194-
})
195-
.on('mouseup', handleMouseOver); // ~ 'zoomend'
196-
}
197-
198-
if(showText) {
199-
s.selectAll('g')
200-
.data(cdi)
201-
.enter().append('g')
202-
.append('text');
203-
}
204-
});
134+
if(!subTypes.hasLines(trace)) return;
135+
136+
s.selectAll('path.js-line')
137+
.data([makeLineGeoJSON(trace)])
138+
.enter().append('path')
139+
.classed('js-line', true);
140+
141+
// TODO add hover - how?
142+
});
143+
144+
gScatterGeoTraces.each(function(trace) {
145+
var s = d3.select(this),
146+
showMarkers = subTypes.hasMarkers(trace),
147+
showText = subTypes.hasText(trace);
148+
149+
if(!showMarkers && !showText) return;
150+
151+
var cdi = plotScatterGeo.calcGeoJSON(trace, geo.topojson),
152+
cleanHoverLabelsFunc = makeCleanHoverLabelsFunc(geo, trace),
153+
eventDataFunc = makeEventDataFunc(trace);
154+
155+
var hoverinfo = trace.hoverinfo,
156+
hasNameLabel = (
157+
hoverinfo === 'all' ||
158+
hoverinfo.indexOf('name') !== -1
159+
);
160+
161+
function handleMouseOver(pt, ptIndex) {
162+
if(!geo.showHover) return;
163+
164+
var xy = geo.projection([pt.lon, pt.lat]);
165+
cleanHoverLabelsFunc(pt);
166+
167+
Fx.loneHover({
168+
x: xy[0],
169+
y: xy[1],
170+
name: hasNameLabel ? trace.name : undefined,
171+
text: pt.textLabel,
172+
color: pt.mc || (trace.marker || {}).color
173+
}, {
174+
container: geo.hoverContainer.node()
175+
});
176+
177+
geo.graphDiv.emit('plotly_hover', eventDataFunc(pt, ptIndex));
178+
}
179+
180+
function handleClick(pt, ptIndex) {
181+
geo.graphDiv.emit('plotly_click', eventDataFunc(pt, ptIndex));
182+
}
183+
184+
if(showMarkers) {
185+
s.selectAll('path.point').data(cdi)
186+
.enter().append('path')
187+
.classed('point', true)
188+
.on('mouseover', handleMouseOver)
189+
.on('click', handleClick)
190+
.on('mouseout', function() {
191+
Fx.loneUnhover(geo.hoverContainer);
192+
})
193+
.on('mousedown', function() {
194+
// to simulate the 'zoomon' event
195+
Fx.loneUnhover(geo.hoverContainer);
196+
})
197+
.on('mouseup', handleMouseOver); // ~ 'zoomend'
198+
}
199+
200+
if(showText) {
201+
s.selectAll('g').data(cdi)
202+
.enter().append('g')
203+
.append('text');
204+
}
205+
});
205206

206207
plotScatterGeo.style(geo);
207208
};
208209

209210
plotScatterGeo.style = function(geo) {
210211
var selection = geo.framework.selectAll('g.trace.scattergeo');
211212

212-
selection.style('opacity', function(trace) { return trace.opacity; });
213+
selection.style('opacity', function(trace) {
214+
return trace.opacity;
215+
});
213216

214-
selection.selectAll('g.points')
215-
.each(function(trace) {
216-
d3.select(this).selectAll('path.point')
217-
.call(Drawing.pointStyle, trace);
218-
d3.select(this).selectAll('text')
219-
.call(Drawing.textPointStyle, trace);
220-
});
217+
selection.each(function(trace) {
218+
d3.select(this).selectAll('path.point')
219+
.call(Drawing.pointStyle, trace);
220+
d3.select(this).selectAll('text')
221+
.call(Drawing.textPointStyle, trace);
222+
});
221223

222224
// GeoJSON calc data is incompatible with Drawing.lineGroupStyle
223225
selection.selectAll('path.js-line')

0 commit comments

Comments
 (0)