Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 782bc66

Browse files
etpinardetpinard
committed
persistent selections for 'scatter' traces
- coerce selected/unselected marker.opacity, marker.color and textfont.color - add Drawing.selectedPointStyle and Drawing.selectedTextStyle to update DOM nodes when `selectedpoints` exists - replace apply_selection_to_calcdata by calc_selection - add support for per-trace Scatter.style call signature - rm DOM styling in Scatter.selectPoints
1 parent 9f3f58d commit 782bc66

File tree

9 files changed

+134
-95
lines changed

9 files changed

+134
-95
lines changed

‎src/components/drawing/index.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ var svgTextUtils = require('../../lib/svg_text_utils');
2222
var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
2323
var alignment = require('../../constants/alignment');
2424
var LINE_SPACING = alignment.LINE_SPACING;
25+
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
2526

2627
var subTypes = require('../../traces/scatter/subtypes');
2728
var makeBubbleSizeFn = require('../../traces/scatter/make_bubble_size_func');
@@ -426,6 +427,35 @@ drawing.pointStyle = function(s, trace, gd) {
426427
});
427428
};
428429

430+
drawing.selectedPointStyle = function(s, trace) {
431+
if(!s.size() || !trace.selectedpoints) return;
432+
433+
var selectedAttrs = trace.selected || {};
434+
var unselectedAttrs = trace.unselected || {};
435+
436+
s.style('opacity', function(d) {
437+
return d.selected ?
438+
(selectedAttrs.marker || {}).opacity :
439+
(unselectedAttrs.marker || {}).opacity;
440+
});
441+
442+
// which is slightly different than:
443+
// ((d.mo + 1 || opacity + 1) - 1) * (d.dim ? DESELECTDIM : 1);
444+
// in https://github.com/plotly/plotly.js/blob/master/src/traces/scatter/select.js
445+
446+
s.each(function(d) {
447+
var pt = d3.select(this);
448+
var smc = (selectedAttrs.marker || {}).color;
449+
var usmc = (unselectedAttrs.marker || {}).color;
450+
451+
if(d.selected) {
452+
if(smc) Color.fill(pt, smc);
453+
} else {
454+
if(usmc) Color.fill(pt, usmc);
455+
}
456+
});
457+
};
458+
429459
drawing.tryColorscale = function(marker, prefix) {
430460
var cont = prefix ? Lib.nestedProperty(marker, prefix).get() : marker,
431461
scl = cont.colorscale,
@@ -483,6 +513,31 @@ drawing.textPointStyle = function(s, trace, gd) {
483513
});
484514
};
485515

516+
drawing.selectedTextStyle = function(s, trace) {
517+
if(!s.size() || !trace.selectedpoints) return;
518+
519+
var selectedAttrs = trace.selected || {};
520+
var unselectedAttrs = trace.unselected || {};
521+
522+
s.each(function(d) {
523+
var tx = d3.select(this);
524+
var tc = d.tc || trace.textfont.color;
525+
var stc = (selectedAttrs.textfont || {}).color;
526+
var utc = (unselectedAttrs.textfont || {}).color;
527+
var tc2;
528+
529+
if(d.selected) {
530+
if(stc) tc2 = stc;
531+
else tc2 = Color.addOpacity(tc, 1);
532+
} else {
533+
if(utc) tc2 = utc;
534+
else tc2 = Color.addOpacity(tc, DESELECTDIM);
535+
}
536+
537+
Color.fill(tx, tc2);
538+
});
539+
};
540+
486541
// generalized Catmull-Rom splines, per
487542
// http://www.cemyuksel.com/research/catmullrom_param/catmullrom.pdf
488543
var CatmullRomExp = 0.5;

‎src/traces/scatter/apply_selection_to_calcdata.js‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎src/traces/scatter/calc.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ var BADNUM = require('../../constants/numerical').BADNUM;
1717
var subTypes = require('./subtypes');
1818
var calcColorscale = require('./colorscale_calc');
1919
var arraysToCalcdata = require('./arrays_to_calcdata');
20-
var applySelectionToCalcdata = require('./apply_selection_to_calcdata');
21-
20+
var calcSelection = require('./calc_selection');
2221

2322
module.exports = function calc(gd, trace) {
2423
var xa = Axes.getFromId(gd, trace.xaxis || 'x'),
@@ -32,10 +31,6 @@ module.exports = function calc(gd, trace) {
3231
s,
3332
i;
3433

35-
var selectedPointIndex = {};
36-
var hoverPointIndex = {};
37-
var idIndex;
38-
3934
// cancel minimum tick spacings (only applies to bars and boxes)
4035
xa._minDtick = 0;
4136
ya._minDtick = 0;
@@ -128,8 +123,7 @@ module.exports = function calc(gd, trace) {
128123
}
129124

130125
arraysToCalcdata(cd, trace);
131-
132-
applySelectionToCalcdata(cd);
126+
calcSelection(cd, trace);
133127

134128
gd.firstscatter = false;
135129
return cd;

‎src/traces/scatter/calc_selection.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Copyright 2012-2017, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var isNumeric = require('fast-isnumeric');
12+
13+
module.exports = function calcSelection(cd, trace) {
14+
var selectedpoints = trace.selectedpoints;
15+
16+
// TODO ids vs points??
17+
18+
if(Array.isArray(selectedpoints)) {
19+
for(var i = 0; i < selectedpoints.length; i++) {
20+
var ptNumber = selectedpoints[i];
21+
22+
if(isNumeric(ptNumber)) {
23+
cd[+ptNumber].selected = 1;
24+
}
25+
}
26+
}
27+
};

‎src/traces/scatter/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ Scatter.calc = require('./calc');
2626
Scatter.arraysToCalcdata = require('./arrays_to_calcdata');
2727
Scatter.plot = require('./plot');
2828
Scatter.colorbar = require('./colorbar');
29-
Scatter.style = require('./style');
29+
Scatter.style = require('./style').style;
3030
Scatter.hoverPoints = require('./hover');
3131
Scatter.selectPoints = require('./select');
3232
Scatter.animatable = true;

‎src/traces/scatter/marker_defaults.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@
1212
var Color = require('../../components/color');
1313
var hasColorscale = require('../../components/colorscale/has_colorscale');
1414
var colorscaleDefaults = require('../../components/colorscale/defaults');
15+
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1516

1617
var subTypes = require('./subtypes');
1718

1819
/*
1920
* opts: object of flags to control features not all marker users support
2021
* noLine: caller does not support marker lines
2122
* gradient: caller supports gradients
23+
* noSelect: caller does not support selected/unselected attribute containers
2224
*/
2325
module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout, coerce, opts) {
2426
var isBubble = subTypes.isBubble(traceIn),
@@ -31,22 +33,22 @@ module.exports = function markerDefaults(traceIn, traceOut, defaultColor, layout
3133
if(lineColor) defaultColor = lineColor;
3234

3335
coerce('marker.symbol');
34-
coerce('marker.opacity', isBubble ? 0.7 : 1);
36+
var mo = coerce('marker.opacity', isBubble ? 0.7 : 1);
3537
coerce('marker.size');
3638

3739
coerce('marker.color', defaultColor);
3840
if(hasColorscale(traceIn, 'marker')) {
3941
colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: 'marker.', cLetter: 'c'});
4042
}
4143

42-
coerce('selected.marker.opacity', isBubble ? 0.7 : 1);
43-
coerce('unselected.marker.opacity', 0.5);
44+
if(!opts.noSelect) {
45+
var moEffective = Array.isArray(mo) ? 1 : mo;
46+
coerce('selected.marker.opacity', moEffective);
47+
coerce('unselected.marker.opacity', DESELECTDIM * moEffective);
4448

45-
coerce('selected.marker.color', defaultColor);
46-
coerce('unselected.marker.color', defaultColor);
47-
48-
coerce('selected.marker.size')
49-
coerce('unselected.marker.size')
49+
coerce('selected.marker.color');
50+
coerce('unselected.marker.color');
51+
}
5052

5153
if(!opts.noLine) {
5254
// if there's a line with a different color than the marker, use

‎src/traces/scatter/select.js‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,25 @@
1010
'use strict';
1111

1212
var subtypes = require('./subtypes');
13-
var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
1413

1514
module.exports = function selectPoints(searchInfo, polygon) {
1615
var cd = searchInfo.cd,
1716
xa = searchInfo.xaxis,
1817
ya = searchInfo.yaxis,
1918
selection = [],
2019
trace = cd[0].trace,
21-
marker = trace.marker,
2220
i,
2321
di,
2422
x,
2523
y;
2624

27-
// TODO: include lines? that would require per-segment line properties
2825
var hasOnlyLines = (!subtypes.hasMarkers(trace) && !subtypes.hasText(trace));
2926
if(hasOnlyLines) return [];
3027

31-
var opacity = Array.isArray(marker.opacity) ? 1 : marker.opacity;
32-
3328
if(polygon === false) { // clear selection
34-
for(i = 0; i < cd.length; i++) cd[i].dim = 0;
29+
for(i = 0; i < cd.length; i++) {
30+
cd[i].selected = 0;
31+
}
3532
}
3633
else {
3734
for(i = 0; i < cd.length; i++) {
@@ -45,23 +42,12 @@ module.exports = function selectPoints(searchInfo, polygon) {
4542
x: xa.c2d(di.x),
4643
y: ya.c2d(di.y)
4744
});
48-
di.dim = 0;
45+
di.selected = 1;
46+
} else {
47+
di.selected = 0;
4948
}
50-
else di.dim = 1;
5149
}
5250
}
5351

54-
// do the dimming here, as well as returning the selection
55-
// The logic here duplicates Drawing.pointStyle, but I don't want
56-
// d.dim in pointStyle in case something goes wrong with selection.
57-
cd[0].node3.selectAll('path.point')
58-
.style('opacity', function(d) {
59-
return ((d.mo + 1 || opacity + 1) - 1) * (d.dim ? DESELECTDIM : 1);
60-
});
61-
cd[0].node3.selectAll('text')
62-
.style('opacity', function(d) {
63-
return d.dim ? DESELECTDIM : 1;
64-
});
65-
6652
return selection;
6753
};

‎src/traces/scatter/style.js‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,21 @@
1010
'use strict';
1111

1212
var d3 = require('d3');
13-
1413
var Drawing = require('../../components/drawing');
1514
var ErrorBars = require('../../components/errorbars');
1615

17-
18-
module.exports = function style(gd) {
19-
var s = d3.select(gd).selectAll('g.trace.scatter');
16+
function style(gd, cd) {
17+
var s = cd ? cd[0].node3 : d3.select(gd).selectAll('g.trace.scatter');
2018

2119
s.style('opacity', function(d) {
2220
return d[0].trace.opacity;
2321
});
2422

25-
s.selectAll('g.points')
26-
.each(function(d) {
27-
var el = d3.select(this);
28-
var pts = el.selectAll('path.point');
29-
var trace = d.trace || d[0].trace;
30-
31-
pts.call(Drawing.pointStyle, trace, gd);
32-
33-
el.selectAll('text')
34-
.call(Drawing.textPointStyle, trace, gd);
35-
});
23+
s.selectAll('g.points').each(function(d) {
24+
var sel = d3.select(this);
25+
var trace = d.trace || d[0].trace;
26+
stylePoints(sel, trace, gd);
27+
});
3628

3729
s.selectAll('g.trace path.js-line')
3830
.call(Drawing.lineGroupStyle);
@@ -41,4 +33,19 @@ module.exports = function style(gd) {
4133
.call(Drawing.fillGroupStyle);
4234

4335
s.call(ErrorBars.style);
36+
}
37+
38+
function stylePoints(sel, trace, gd) {
39+
var pts = sel.selectAll('path.point');
40+
var txs = sel.selectAll('text');
41+
42+
Drawing.pointStyle(pts, trace, gd);
43+
Drawing.textPointStyle(txs, trace, gd);
44+
Drawing.selectedPointStyle(pts, trace);
45+
Drawing.selectedTextStyle(txs, trace);
46+
}
47+
48+
module.exports = {
49+
style: style,
50+
stylePoints: stylePoints
4451
};

‎src/traces/scatter/text_defaults.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,18 @@
1111

1212
var Lib = require('../../lib');
1313

14+
/*
15+
* opts: object of flags to control features not all text users support
16+
* noSelect: caller does not support selected/unselected attribute containers
17+
*/
18+
module.exports = function(traceIn, traceOut, layout, coerce, opts) {
19+
opts = opts || {};
1420

15-
// common to 'scatter', 'scatter3d' and 'scattergeo'
16-
module.exports = function(traceIn, traceOut, layout, coerce) {
1721
coerce('textposition');
1822
Lib.coerceFont(coerce, 'textfont', layout.font);
23+
24+
if(!opts.noSelect) {
25+
coerce('selected.textfont.color');
26+
coerce('unselected.textfont.color');
27+
}
1928
};

0 commit comments

Comments
 (0)