adapt choropleth plot and hover (in preparation for selections)

- make choropleth trace go though a calc step
- use lib/polygon on hover 🎉,
  instead of old ad hoc mouse-event-on-svg-node way)
- use clean enter/exit/merge d3 pattern instead of inner node purgery
- bind 'real' calcdata items to selections,
  instead of patched geojson objects.

Author: etpinard

src/traces/choropleth/calc.js

@@ -9,9 +9,27 @@
 
 'use strict';
 
-var colorscaleCalc = require('../../components/colorscale/calc');
+var isNumeric = require('fast-isnumeric');
+var BADNUM = require('../../constants/numerical').BADNUM;
 
+var colorscaleCalc = require('../../components/colorscale/calc');
+var arraysToCalcdata = require('../scatter/arrays_to_calcdata');
 
 module.exports = function calc(gd, trace) {
+    var len = trace.locations.length;
+    var calcTrace = new Array(len);
+
+    for(var i = 0; i < len; i++) {
+        var calcPt = calcTrace[i] = {};
+        var loc = trace.locations[i];
+        var z = trace.z[i];
+
+        calcPt.loc = typeof loc === 'string' ? loc : null;
+        calcPt.z = isNumeric(z) ? z : BADNUM;
+    }
+
+    arraysToCalcdata(calcTrace, trace);
     colorscaleCalc(trace, trace.z, '', 'z');
+
+    return calcTrace;
 };

src/traces/choropleth/hover.js

@@ -12,23 +12,35 @@
 var Axes = require('../../plots/cartesian/axes');
 var attributes = require('./attributes');
 
-module.exports = function hoverPoints(pointData) {
+module.exports = function hoverPoints(pointData, xval, yval) {
     var cd = pointData.cd;
     var trace = cd[0].trace;
     var geo = pointData.subplot;
 
-    // set on choropleth paths 'mouseover'
-    var pt = geo.choroplethHoverPt;
+    var pt, i, j, isInside;
 
-    if(!pt) return;
+    for(i = 0; i < cd.length; i++) {
+        pt = cd[i];
+        isInside = false;
 
-    var centroid = geo.projection(pt.properties.ct);
+        if(pt._polygons) {
+            for(j = 0; j < pt._polygons.length; j++) {
+                if(pt._polygons[j].contains([xval, yval])) {
+                    isInside = !isInside;
+                }
+            }
 
-    pointData.x0 = pointData.x1 = centroid[0];
-    pointData.y0 = pointData.y1 = centroid[1];
+            if(isInside) break;
+        }
+    }
+
+    if(!isInside || !pt) return;
+
+    pointData.x0 = pointData.x1 = pointData.xa.c2p(pt.ct);
+    pointData.y0 = pointData.y1 = pointData.ya.c2p(pt.ct);
 
     pointData.index = pt.index;
-    pointData.location = pt.id;
+    pointData.location = pt.loc;
     pointData.z = pt.z;
 
     makeHoverInfo(pointData, trace, pt, geo.mockAxis);
@@ -55,10 +67,11 @@ function makeHoverInfo(pointData, trace, pt, axis) {
         return Axes.tickText(axis, axis.c2l(val), 'hover').text;
     }
 
-    if(hasIdAsNameLabel) pointData.nameOverride = pt.id;
-    else {
+    if(hasIdAsNameLabel) {
+        pointData.nameOverride = pt.loc;
+    } else {
         if(hasName) pointData.nameOverride = trace.name;
-        if(hasLocation) text.push(pt.id);
+        if(hasLocation) text.push(pt.loc);
     }
 
     if(hasZ) text.push(formatter(pt.z));

src/traces/choropleth/plot.js

@@ -11,100 +11,84 @@
 
 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 arrayToCalcItem = require('../../lib/array_to_calc_item');
 
-var constants = require('../../plots/geo/constants');
-
-module.exports = function plot(geo, calcData, geoLayout) {
+module.exports = function plot(geo, calcData) {
+    for(var i = 0; i < calcData.length; i++) {
+        calcGeoJSON(calcData[i], geo.topojson);
+    }
 
     function keyFunc(d) { return d[0].trace.uid; }
 
-    var framework = geo.framework,
-        gChoropleth = framework.select('g.choroplethlayer'),
-        gBaseLayer = framework.select('g.baselayer'),
-        gBaseLayerOverChoropleth = framework.select('g.baselayeroverchoropleth'),
-        baseLayersOverChoropleth = constants.baseLayersOverChoropleth,
-        layerName;
-
-    var gChoroplethTraces = gChoropleth
+    var gTraces = geo.layers.backplot.select('.choroplethlayer')
         .selectAll('g.trace.choropleth')
         .data(calcData, keyFunc);
 
-    gChoroplethTraces.enter().append('g')
+    gTraces.enter().append('g')
         .attr('class', 'trace choropleth');
 
-    gChoroplethTraces.exit().remove();
+    gTraces.exit().remove();
 
-    gChoroplethTraces.each(function(calcTrace) {
-        var trace = calcTrace[0].trace,
-            cdi = calcGeoJSON(trace, geo.topojson);
+    gTraces.each(function(calcTrace) {
+        var sel = calcTrace[0].node3 = d3.select(this);
 
-        var paths = d3.select(this)
-            .selectAll('path.choroplethlocation')
-            .data(cdi);
+        var paths = sel.selectAll('path.choroplethlocation')
+            .data(Lib.identity);
 
         paths.enter().append('path')
-            .classed('choroplethlocation', true)
-            .on('mouseover', function(pt) {
-                geo.choroplethHoverPt = pt;
-            })
-            .on('mouseout', function() {
-                geo.choroplethHoverPt = null;
-            });
+            .classed('choroplethlocation', true);
 
         paths.exit().remove();
     });
 
-    // some baselayers are drawn over choropleth
-    gBaseLayerOverChoropleth.selectAll('*').remove();
-
-    for(var i = 0; i < baseLayersOverChoropleth.length; i++) {
-        layerName = baseLayersOverChoropleth[i];
-        gBaseLayer.select('g.' + layerName).remove();
-        geo.drawTopo(gBaseLayerOverChoropleth, layerName, geoLayout);
-        geo.styleLayer(gBaseLayerOverChoropleth, layerName, geoLayout);
-    }
-
     style(geo);
 };
 
-function calcGeoJSON(trace, topojson) {
-    var cdi = [],
-        locations = trace.locations,
-        len = locations.length,
-        features = getTopojsonFeatures(trace, topojson),
-        markerLine = (trace.marker || {}).line || {};
-
-    var feature;
-
-    for(var i = 0; i < len; i++) {
-        feature = locationToFeature(trace.locationmode, locations[i], features);
-
-        if(!feature) continue;  // filter the blank features here
-
-        // 'data_array' attributes
-        feature.z = trace.z[i];
-        if(trace.text !== undefined) feature.tx = trace.text[i];
-
-        // 'arrayOk' attributes
-        arrayToCalcItem(markerLine.color, feature, 'mlc', i);
-        arrayToCalcItem(markerLine.width, feature, 'mlw', i);
-
-        // for event data
-        feature.index = i;
-
-        cdi.push(feature);
+function calcGeoJSON(calcTrace, topojson) {
+    var trace = calcTrace[0].trace;
+    var len = calcTrace.length;
+    var features = getTopojsonFeatures(trace, topojson);
+    var i, j, k;
+
+    for(i = 0; i < len; i++) {
+        var calcPt = calcTrace[i];
+        var feature = locationToFeature(trace.locationmode, calcPt.loc, features);
+
+        if(!feature) {
+            calcPt.geojson = null;
+            continue;
+        }
+
+        calcPt.geojson = feature;
+        calcPt.ct = feature.properties.ct;
+        calcPt.index = i;
+
+        var geometry = feature.geometry;
+        var coords = geometry.coordinates;
+        calcPt._polygons = [];
+
+        switch(geometry.type) {
+            case 'MultiPolygon':
+                for(j = 0; j < coords.length; j++) {
+                    for(k = 0; k < coords[j].length; k++) {
+                        calcPt._polygons.push(polygon.tester(coords[j][k]));
+                    }
+                }
+                break;
+            case 'Polygon':
+                for(j = 0; j < coords.length; j++) {
+                    calcPt._polygons.push(polygon.tester(coords[j]));
+                }
+                break;
+        }
     }
-
-    if(cdi.length > 0) cdi[0].trace = trace;
-
-    return cdi;
 }
 
 function style(geo) {
@@ -122,9 +106,11 @@ function style(geo) {
             )
         );
 
-        s.selectAll('path.choroplethlocation').each(function(pt) {
+        s.selectAll('path.choroplethlocation').each(function(_, i) {
+            var pt = calcTrace[i];
+
             d3.select(this)
-                .attr('fill', function(pt) { return sclFunc(pt.z); })
+                .attr('fill', sclFunc(pt.z))
                 .call(Color.stroke, pt.mlc || markerLine.color)
                 .call(Drawing.dashLine, '', pt.mlw || markerLine.width || 0);
         });