persistent selections for 'choropleth'

etpinard · etpinard · commit eeace5b79674 · 2017-11-02T16:26:59.000-04:00
- in which a new style per-trace-only style() method is added
  (similar to 'scattergeo')  AND a new attribute: 'marker.opacity'
  to make selection behavior be attribute-describable.
diff --git a/src/traces/choropleth/attributes.js b/src/traces/choropleth/attributes.js
@@ -8,7 +8,7 @@
 
 'use strict';
 
-var ScatterGeoAttrs = require('../scattergeo/attributes');
+var scatterGeoAttrs = require('../scattergeo/attributes');
 var colorscaleAttrs = require('../../components/colorscale/attributes');
 var colorbarAttrs = require('../../components/colorbar/attributes');
 var plotAttrs = require('../../plots/attributes');
@@ -17,7 +17,7 @@ var extend = require('../../lib/extend');
 var extendFlat = extend.extendFlat;
 var extendDeepAll = extend.extendDeepAll;
 
-var ScatterGeoMarkerLineAttrs = ScatterGeoAttrs.marker.line;
+var scatterGeoMarkerLineAttrs = scatterGeoAttrs.marker.line;
 
 module.exports = extendFlat({
     locations: {
@@ -28,23 +28,49 @@ module.exports = extendFlat({
             'See `locationmode` for more info.'
         ].join(' ')
     },
-    locationmode: ScatterGeoAttrs.locationmode,
+    locationmode: scatterGeoAttrs.locationmode,
     z: {
         valType: 'data_array',
         editType: 'calc',
         description: 'Sets the color values.'
     },
-    text: extendFlat({}, ScatterGeoAttrs.text, {
+    text: extendFlat({}, scatterGeoAttrs.text, {
         description: 'Sets the text elements associated with each location.'
     }),
     marker: {
         line: {
-            color: ScatterGeoMarkerLineAttrs.color,
-            width: extendFlat({}, ScatterGeoMarkerLineAttrs.width, {dflt: 1}),
+            color: scatterGeoMarkerLineAttrs.color,
+            width: extendFlat({}, scatterGeoMarkerLineAttrs.width, {dflt: 1}),
             editType: 'calc'
         },
+        opacity: {
+            valType: 'number',
+            arrayOk: true,
+            min: 0,
+            max: 1,
+            dflt: 1,
+            role: 'style',
+            editType: 'style',
+            description: 'Sets the opacity of the locations.'
+        },
         editType: 'calc'
     },
+
+    selected: {
+        marker: {
+            opacity: scatterGeoAttrs.selected.marker.opacity,
+            editType: 'plot'
+        },
+        editType: 'plot'
+    },
+    unselected: {
+        marker: {
+            opacity: scatterGeoAttrs.unselected.marker.opacity,
+            editType: 'plot'
+        },
+        editType: 'plot'
+    },
+
     hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
         editType: 'calc',
         flags: ['location', 'z', 'text', 'name']
diff --git a/src/traces/choropleth/calc.js b/src/traces/choropleth/calc.js
@@ -14,6 +14,7 @@ var BADNUM = require('../../constants/numerical').BADNUM;
 
 var colorscaleCalc = require('../../components/colorscale/calc');
 var arraysToCalcdata = require('../scatter/arrays_to_calcdata');
+var calcSelection = require('../scatter/calc_selection');
 
 module.exports = function calc(gd, trace) {
     var len = trace.locations.length;
@@ -30,6 +31,7 @@ module.exports = function calc(gd, trace) {
 
     arraysToCalcdata(calcTrace, trace);
     colorscaleCalc(trace, trace.z, '', 'z');
+    calcSelection(calcTrace, trace);
 
     return calcTrace;
 };
diff --git a/src/traces/choropleth/defaults.js b/src/traces/choropleth/defaults.js
@@ -10,10 +10,9 @@
 'use strict';
 
 var Lib = require('../../lib');
-
 var colorscaleDefaults = require('../../components/colorscale/defaults');
 var attributes = require('./attributes');
-
+var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
 
 module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     function coerce(attr, dflt) {
@@ -45,6 +44,12 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
     coerce('marker.line.color');
     coerce('marker.line.width');
 
+    var mo = coerce('marker.opacity');
+    var moEffective = Array.isArray(mo) ? 1 : mo;
+
+    coerce('selected.marker.opacity', moEffective);
+    coerce('unselected.marker.opacity', DESELECTDIM * moEffective);
+
     colorscaleDefaults(
         traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'}
     );
diff --git a/src/traces/choropleth/index.js b/src/traces/choropleth/index.js
@@ -16,6 +16,7 @@ Choropleth.supplyDefaults = require('./defaults');
 Choropleth.colorbar = require('../heatmap/colorbar');
 Choropleth.calc = require('./calc');
 Choropleth.plot = require('./plot');
+Choropleth.style = require('./style');
 Choropleth.hoverPoints = require('./hover');
 Choropleth.eventData = require('./event_data');
 Choropleth.selectPoints = require('./select');
diff --git a/src/traces/choropleth/plot.js b/src/traces/choropleth/plot.js
@@ -6,19 +6,16 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var d3 = require('d3');
 
 var Lib = require('../../lib');
-var Color = require('../../components/color');
-var Drawing = require('../../components/drawing');
-var Colorscale = require('../../components/colorscale');
 var polygon = require('../../lib/polygon');
 
 var getTopojsonFeatures = require('../../lib/topojson_utils').getTopojsonFeatures;
 var locationToFeature = require('../../lib/geo_location_utils').locationToFeature;
+var style = require('./style');
 
 module.exports = function plot(geo, calcData) {
     for(var i = 0; i < calcData.length; i++) {
@@ -46,9 +43,10 @@ module.exports = function plot(geo, calcData) {
             .classed('choroplethlocation', true);
 
         paths.exit().remove();
-    });
 
-    style(geo);
+        // call style here within topojson request callback
+        style(geo.graphDiv, calcTrace);
+    });
 };
 
 function calcGeoJSON(calcTrace, topojson) {
@@ -176,28 +174,3 @@ function feature2polygons(feature) {
 
     return polygons;
 }
-
-function style(geo) {
-    var gTraces = geo.layers.backplot.selectAll('.trace.choropleth');
-
-    gTraces.each(function(calcTrace) {
-        var trace = calcTrace[0].trace;
-        var marker = trace.marker || {};
-        var markerLine = marker.line || {};
-
-        var sclFunc = Colorscale.makeColorScaleFunc(
-            Colorscale.extractScale(
-                trace.colorscale,
-                trace.zmin,
-                trace.zmax
-            )
-        );
-
-        d3.select(this).selectAll('.choroplethlocation').each(function(d) {
-            d3.select(this)
-                .attr('fill', sclFunc(d.z))
-                .call(Color.stroke, d.mlc || markerLine.color)
-                .call(Drawing.dashLine, '', d.mlw || markerLine.width || 0);
-        });
-    });
-}
diff --git a/src/traces/choropleth/select.js b/src/traces/choropleth/select.js
@@ -8,20 +8,17 @@
 
 'use strict';
 
-var DESELECTDIM = require('../../constants/interactions').DESELECTDIM;
-
 module.exports = function selectPoints(searchInfo, polygon) {
     var cd = searchInfo.cd;
     var xa = searchInfo.xaxis;
     var ya = searchInfo.yaxis;
     var selection = [];
-    var node3 = cd[0].node3;
 
     var i, di, ct, x, y;
 
     if(polygon === false) {
         for(i = 0; i < cd.length; i++) {
-            cd[i].dim = 0;
+            cd[i].selected = 0;
         }
     } else {
         for(i = 0; i < cd.length; i++) {
@@ -39,16 +36,12 @@ module.exports = function selectPoints(searchInfo, polygon) {
                     lon: ct[0],
                     lat: ct[1]
                 });
-                di.dim = 0;
+                di.selected = 1;
             } else {
-                di.dim = 1;
+                di.selected = 0;
             }
         }
     }
 
-    node3.selectAll('path').style('opacity', function(d) {
-        return d.dim ? DESELECTDIM : 1;
-    });
-
     return selection;
 };
diff --git a/src/traces/choropleth/style.js b/src/traces/choropleth/style.js
@@ -0,0 +1,53 @@
+/**
+* Copyright 2012-2017, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var d3 = require('d3');
+var Color = require('../../components/color');
+var Drawing = require('../../components/drawing');
+var Colorscale = require('../../components/colorscale');
+
+module.exports = function style(gd, calcTrace) {
+    if(calcTrace) styleTrace(gd, calcTrace);
+};
+
+function styleTrace(gd, calcTrace) {
+    var trace = calcTrace[0].trace;
+    var s = calcTrace[0].node3;
+    var locs = s.selectAll('.choroplethlocation');
+    var marker = trace.marker || {};
+    var markerLine = marker.line || {};
+
+    var sclFunc = Colorscale.makeColorScaleFunc(
+        Colorscale.extractScale(
+            trace.colorscale,
+            trace.zmin,
+            trace.zmax
+        )
+    );
+
+    locs.each(function(d) {
+        d3.select(this)
+            .attr('fill', sclFunc(d.z))
+            .call(Color.stroke, d.mlc || markerLine.color)
+            .call(Drawing.dashLine, '', d.mlw || markerLine.width || 0)
+            .style('opacity', marker.opacity);
+    });
+
+    if(trace.selectedpoints) {
+        var selectedAttrs = trace.selected || {};
+        var unselectedAttrs = trace.unselected || {};
+
+        locs.style('opacity', function(d) {
+            return d.selected ?
+                selectedAttrs.marker.opacity :
+                unselectedAttrs.marker.opacity;
+        });
+    }
+}
