Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 2b1713d

Browse filesBrowse files
etpinardetpinard
authored
Merge pull request plotly#2583 from plotly/scatter-select-perf
SVG trace on selection perf
2 parents 776ddca + 3e32b23 commit 2b1713d
Copy full SHA for 2b1713d

File tree

Expand file treeCollapse file tree

23 files changed

+417
-232
lines changed
Filter options
Expand file treeCollapse file tree

23 files changed

+417
-232
lines changed

‎src/components/drawing/index.js

Copy file name to clipboardExpand all lines: src/components/drawing/index.js
+205-148Lines changed: 205 additions & 148 deletions
Large diffs are not rendered by default.

‎src/components/legend/style.js

Copy file name to clipboardExpand all lines: src/components/legend/style.js
+5-2Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,8 @@ module.exports = function style(s, gd) {
110110

111111
// constrain text, markers, etc so they'll fit on the legend
112112
if(showMarkers || showText || showLines) {
113-
var dEdit = {},
114-
tEdit = {};
113+
var dEdit = {};
114+
var tEdit = {};
115115

116116
if(showMarkers) {
117117
dEdit.mc = boundVal('marker.color', pickFirst);
@@ -142,6 +142,9 @@ module.exports = function style(s, gd) {
142142

143143
dMod = [Lib.minExtend(d0, dEdit)];
144144
tMod = Lib.minExtend(trace, tEdit);
145+
146+
// always show legend items in base state
147+
tMod.selectedpoints = null;
145148
}
146149

147150
var ptgroup = d3.select(this).select('g.legendpoints');

‎src/plots/cartesian/select.js

Copy file name to clipboardExpand all lines: src/plots/cartesian/select.js
+4-2Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -404,18 +404,20 @@ function updateSelectedState(gd, searchTraces, eventData) {
404404
var len = items.length;
405405
var item0 = items[0];
406406
var trace0 = item0.cd[0].trace;
407+
var _module = item0._module;
408+
var styleSelection = _module.styleOnSelect || _module.style;
407409

408410
if(Registry.traceIs(trace0, 'regl')) {
409411
// plot regl traces per module
410412
var cds = new Array(len);
411413
for(j = 0; j < len; j++) {
412414
cds[j] = items[j].cd;
413415
}
414-
item0._module.style(gd, cds);
416+
styleSelection(gd, cds);
415417
} else {
416418
// plot svg trace per trace
417419
for(j = 0; j < len; j++) {
418-
item0._module.style(gd, items[j].cd);
420+
styleSelection(gd, items[j].cd);
419421
}
420422
}
421423
}

‎src/plots/plots.js

Copy file name to clipboardExpand all lines: src/plots/plots.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -819,7 +819,7 @@ plots.linkSubplots = function(newFullData, newFullLayout, oldFullData, oldFullLa
819819
}
820820
// Then look for a subplot with the counteraxis overlaying the anchor
821821
// If that fails just use the first subplot including this axis
822-
if(!mainSubplotID || ids.indexOf(mainSubplotID) === -1) {
822+
if(!mainSubplotID || !newSubplots[mainSubplotID]) {
823823
mainSubplotID = '';
824824
for(j = 0; j < ids.length; j++) {
825825
id = ids[j];

‎src/traces/bar/index.js

Copy file name to clipboardExpand all lines: src/traces/bar/index.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@ Bar.setPositions = require('./set_positions');
2020
Bar.colorbar = require('../scatter/colorbar');
2121
Bar.arraysToCalcdata = require('./arrays_to_calcdata');
2222
Bar.plot = require('./plot');
23-
Bar.style = require('./style');
23+
Bar.style = require('./style').style;
24+
Bar.styleOnSelect = require('./style').styleOnSelect;
2425
Bar.hoverPoints = require('./hover');
2526
Bar.selectPoints = require('./select');
2627

‎src/traces/bar/style.js

Copy file name to clipboardExpand all lines: src/traces/bar/style.js
+40-22Lines changed: 40 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ var d3 = require('d3');
1313
var Drawing = require('../../components/drawing');
1414
var Registry = require('../../registry');
1515

16-
module.exports = function style(gd, cd) {
16+
function style(gd, cd) {
1717
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.bars');
1818
var barcount = s.size();
1919
var fullLayout = gd._fullLayout;
@@ -35,34 +35,52 @@ module.exports = function style(gd, cd) {
3535

3636
s.selectAll('g.points').each(function(d) {
3737
var sel = d3.select(this);
38-
var pts = sel.selectAll('path');
39-
var txs = sel.selectAll('text');
4038
var trace = d[0].trace;
39+
stylePoints(sel, trace, gd);
40+
});
41+
42+
Registry.getComponentMethod('errorbars', 'style')(s);
43+
}
4144

42-
Drawing.pointStyle(pts, trace, gd);
43-
Drawing.selectedPointStyle(pts, trace);
45+
function stylePoints(sel, trace, gd) {
46+
var pts = sel.selectAll('path');
47+
var txs = sel.selectAll('text');
4448

45-
txs.each(function(d) {
46-
var tx = d3.select(this);
47-
var textFont;
49+
Drawing.pointStyle(pts, trace, gd);
4850

49-
if(tx.classed('bartext-inside')) {
50-
textFont = trace.insidetextfont;
51-
} else if(tx.classed('bartext-outside')) {
52-
textFont = trace.outsidetextfont;
53-
}
54-
if(!textFont) textFont = trace.textfont;
51+
txs.each(function(d) {
52+
var tx = d3.select(this);
53+
var textFont;
5554

56-
function cast(k) {
57-
var cont = textFont[k];
58-
return Array.isArray(cont) ? cont[d.i] : cont;
59-
}
55+
if(tx.classed('bartext-inside')) {
56+
textFont = trace.insidetextfont;
57+
} else if(tx.classed('bartext-outside')) {
58+
textFont = trace.outsidetextfont;
59+
}
60+
if(!textFont) textFont = trace.textfont;
6061

61-
Drawing.font(tx, cast('family'), cast('size'), cast('color'));
62-
});
62+
function cast(k) {
63+
var cont = textFont[k];
64+
return Array.isArray(cont) ? cont[d.i] : cont;
65+
}
6366

64-
Drawing.selectedTextStyle(txs, trace);
67+
Drawing.font(tx, cast('family'), cast('size'), cast('color'));
6568
});
69+
}
6670

67-
Registry.getComponentMethod('errorbars', 'style')(s);
71+
function styleOnSelect(gd, cd) {
72+
var s = cd[0].node3;
73+
var trace = cd[0].trace;
74+
75+
if(trace.selectedpoints) {
76+
Drawing.selectedPointStyle(s.selectAll('path'), trace);
77+
Drawing.selectedTextStyle(s.selectAll('text'), trace);
78+
} else {
79+
stylePoints(s, trace, gd);
80+
}
81+
}
82+
83+
module.exports = {
84+
style: style,
85+
styleOnSelect: styleOnSelect
6886
};

‎src/traces/box/index.js

Copy file name to clipboardExpand all lines: src/traces/box/index.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ Box.supplyLayoutDefaults = require('./layout_defaults').supplyLayoutDefaults;
1717
Box.calc = require('./calc');
1818
Box.setPositions = require('./set_positions').setPositions;
1919
Box.plot = require('./plot').plot;
20-
Box.style = require('./style');
20+
Box.style = require('./style').style;
21+
Box.styleOnSelect = require('./style').styleOnSelect;
2122
Box.hoverPoints = require('./hover').hoverPoints;
2223
Box.selectPoints = require('./select');
2324

‎src/traces/box/style.js

Copy file name to clipboardExpand all lines: src/traces/box/style.js
+18-2Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var d3 = require('d3');
1212
var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414

15-
module.exports = function style(gd, cd) {
15+
function style(gd, cd) {
1616
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.boxes');
1717

1818
s.style('opacity', function(d) { return d[0].trace.opacity; });
@@ -50,7 +50,23 @@ module.exports = function style(gd, cd) {
5050

5151
var pts = el.selectAll('path.point');
5252
Drawing.pointStyle(pts, trace, gd);
53-
Drawing.selectedPointStyle(pts, trace);
5453
}
5554
});
55+
}
56+
57+
function styleOnSelect(gd, cd) {
58+
var s = cd[0].node3;
59+
var trace = cd[0].trace;
60+
var pts = s.selectAll('path.point');
61+
62+
if(trace.selectedpoints) {
63+
Drawing.selectedPointStyle(pts, trace);
64+
} else {
65+
Drawing.pointStyle(pts, trace, gd);
66+
}
67+
}
68+
69+
module.exports = {
70+
style: style,
71+
styleOnSelect: styleOnSelect
5672
};

‎src/traces/candlestick/index.js

Copy file name to clipboardExpand all lines: src/traces/candlestick/index.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ module.exports = {
3737
calc: require('./calc'),
3838
plot: require('../box/plot').plot,
3939
layerName: 'boxlayer',
40-
style: require('../box/style'),
40+
style: require('../box/style').style,
4141
hoverPoints: require('../ohlc/hover'),
4242
selectPoints: require('../ohlc/select')
4343
};

‎src/traces/choropleth/index.js

Copy file name to clipboardExpand all lines: src/traces/choropleth/index.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ Choropleth.supplyDefaults = require('./defaults');
1616
Choropleth.colorbar = require('../heatmap/colorbar');
1717
Choropleth.calc = require('./calc');
1818
Choropleth.plot = require('./plot');
19-
Choropleth.style = require('./style');
19+
Choropleth.style = require('./style').style;
20+
Choropleth.styleOnSelect = require('./style').styleOnSelect;
2021
Choropleth.hoverPoints = require('./hover');
2122
Choropleth.eventData = require('./event_data');
2223
Choropleth.selectPoints = require('./select');

‎src/traces/choropleth/plot.js

Copy file name to clipboardExpand all lines: src/traces/choropleth/plot.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ var polygon = require('../../lib/polygon');
1515

1616
var getTopojsonFeatures = require('../../lib/topojson_utils').getTopojsonFeatures;
1717
var locationToFeature = require('../../lib/geo_location_utils').locationToFeature;
18-
var style = require('./style');
18+
var style = require('./style').style;
1919

2020
module.exports = function plot(gd, geo, calcData) {
2121
for(var i = 0; i < calcData.length; i++) {

‎src/traces/choropleth/style.js

Copy file name to clipboardExpand all lines: src/traces/choropleth/style.js
+19-3Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ var Color = require('../../components/color');
1313
var Drawing = require('../../components/drawing');
1414
var Colorscale = require('../../components/colorscale');
1515

16-
module.exports = function style(gd, calcTrace) {
16+
function style(gd, calcTrace) {
1717
if(calcTrace) styleTrace(gd, calcTrace);
18-
};
18+
}
1919

2020
function styleTrace(gd, calcTrace) {
2121
var trace = calcTrace[0].trace;
@@ -40,5 +40,21 @@ function styleTrace(gd, calcTrace) {
4040
.style('opacity', marker.opacity);
4141
});
4242

43-
Drawing.selectedPointStyle(locs, trace);
43+
Drawing.selectedPointStyle(locs, trace, gd);
4444
}
45+
46+
function styleOnSelect(gd, calcTrace) {
47+
var s = calcTrace[0].node3;
48+
var trace = calcTrace[0].trace;
49+
50+
if(trace.selectedpoints) {
51+
Drawing.selectedPointStyle(s.selectAll('.choroplethlocation'), trace, gd);
52+
} else {
53+
styleTrace(gd, calcTrace);
54+
}
55+
}
56+
57+
module.exports = {
58+
style: style,
59+
styleOnSelect: styleOnSelect
60+
};

‎src/traces/histogram/index.js

Copy file name to clipboardExpand all lines: src/traces/histogram/index.js
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ Histogram.calc = require('./calc');
3333
Histogram.setPositions = require('../bar/set_positions');
3434
Histogram.plot = require('../bar/plot');
3535
Histogram.layerName = 'barlayer';
36-
Histogram.style = require('../bar/style');
36+
Histogram.style = require('../bar/style').style;
37+
Histogram.styleOnSelect = require('../bar/style').styleOnSelect;
3738
Histogram.colorbar = require('../scatter/colorbar');
3839
Histogram.hoverPoints = require('./hover');
3940
Histogram.selectPoints = require('../bar/select');

‎src/traces/scatter/index.js

Copy file name to clipboardExpand all lines: src/traces/scatter/index.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ Scatter.arraysToCalcdata = require('./arrays_to_calcdata');
2727
Scatter.plot = require('./plot');
2828
Scatter.colorbar = require('./colorbar');
2929
Scatter.style = require('./style').style;
30+
Scatter.styleOnSelect = require('./style').styleOnSelect;
3031
Scatter.hoverPoints = require('./hover');
3132
Scatter.selectPoints = require('./select');
3233
Scatter.animatable = true;

‎src/traces/scatter/plot.js

Copy file name to clipboardExpand all lines: src/traces/scatter/plot.js
+13-11Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -407,14 +407,14 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
407407
function makePoints(d) {
408408
var join, selection, hasNode;
409409

410-
var trace = d[0].trace,
411-
s = d3.select(this),
412-
showMarkers = subTypes.hasMarkers(trace),
413-
showText = subTypes.hasText(trace);
410+
var trace = d[0].trace;
411+
var s = d3.select(this);
412+
var showMarkers = subTypes.hasMarkers(trace);
413+
var showText = subTypes.hasText(trace);
414414

415-
var keyFunc = getKeyFunc(trace),
416-
markerFilter = hideFilter,
417-
textFilter = hideFilter;
415+
var keyFunc = getKeyFunc(trace);
416+
var markerFilter = hideFilter;
417+
var textFilter = hideFilter;
418418

419419
if(showMarkers) {
420420
markerFilter = (trace.marker.maxdisplayed || trace._needsCull) ? visFilter : Lib.identity;
@@ -442,18 +442,20 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
442442
.style('opacity', 1);
443443
}
444444

445-
var markerScale = showMarkers && Drawing.tryColorscale(trace.marker, '');
446-
var lineScale = showMarkers && Drawing.tryColorscale(trace.marker, 'line');
447-
448445
join.order();
449446

447+
var styleFns;
448+
if(showMarkers) {
449+
styleFns = Drawing.makePointStyleFns(trace);
450+
}
451+
450452
join.each(function(d) {
451453
var el = d3.select(this);
452454
var sel = transition(el);
453455
hasNode = Drawing.translatePoint(d, sel, xa, ya);
454456

455457
if(hasNode) {
456-
Drawing.singlePointStyle(d, sel, trace, markerScale, lineScale, gd);
458+
Drawing.singlePointStyle(d, sel, trace, styleFns, gd);
457459

458460
if(plotinfo.layerClipId) {
459461
Drawing.hideOutsideRangePoint(d, sel, xa, ya, trace.xcalendar, trace.ycalendar);

‎src/traces/scatter/style.js

Copy file name to clipboardExpand all lines: src/traces/scatter/style.js
+15-7Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,24 @@ function style(gd, cd) {
3636
}
3737

3838
function stylePoints(sel, trace, gd) {
39-
var pts = sel.selectAll('path.point');
40-
var txs = sel.selectAll('text');
39+
Drawing.pointStyle(sel.selectAll('path.point'), trace, gd);
40+
Drawing.textPointStyle(sel.selectAll('text'), trace, gd);
41+
}
42+
43+
function styleOnSelect(gd, cd) {
44+
var s = cd[0].node3;
45+
var trace = cd[0].trace;
4146

42-
Drawing.pointStyle(pts, trace, gd);
43-
Drawing.textPointStyle(txs, trace, gd);
44-
Drawing.selectedPointStyle(pts, trace);
45-
Drawing.selectedTextStyle(txs, trace);
47+
if(trace.selectedpoints) {
48+
Drawing.selectedPointStyle(s.selectAll('path.point'), trace);
49+
Drawing.selectedTextStyle(s.selectAll('text'), trace);
50+
} else {
51+
stylePoints(s, trace, gd);
52+
}
4653
}
4754

4855
module.exports = {
4956
style: style,
50-
stylePoints: stylePoints
57+
stylePoints: stylePoints,
58+
styleOnSelect: styleOnSelect
5159
};

‎src/traces/scattercarpet/index.js

Copy file name to clipboardExpand all lines: src/traces/scattercarpet/index.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ ScatterCarpet.colorbar = require('../scatter/colorbar');
1616
ScatterCarpet.calc = require('./calc');
1717
ScatterCarpet.plot = require('./plot');
1818
ScatterCarpet.style = require('../scatter/style').style;
19+
ScatterCarpet.styleOnSelect = require('../scatter/style').styleOnSelect;
1920
ScatterCarpet.hoverPoints = require('./hover');
2021
ScatterCarpet.selectPoints = require('../scatter/select');
2122
ScatterCarpet.eventData = require('./event_data');

‎src/traces/scattergeo/index.js

Copy file name to clipboardExpand all lines: src/traces/scattergeo/index.js
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ ScatterGeo.colorbar = require('../scatter/colorbar');
1717
ScatterGeo.calc = require('./calc');
1818
ScatterGeo.plot = require('./plot');
1919
ScatterGeo.style = require('./style');
20+
ScatterGeo.styleOnSelect = require('../scatter/style').styleOnSelect;
2021
ScatterGeo.hoverPoints = require('./hover');
2122
ScatterGeo.eventData = require('./event_data');
2223
ScatterGeo.selectPoints = require('./select');

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.