Add zorder attribute to control stacking order of SVG traces drawn into cartesian subplots

dist/plotly-cartesian.js

@@ -87391,19 +87391,19 @@ module.exports = $gOPD;
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
-
-
-var isBrowser = __webpack_require__(24200)
-var hasHover
-
-if (typeof __webpack_require__.g.matchMedia === 'function') {
-	hasHover = !__webpack_require__.g.matchMedia('(hover: none)').matches
-}
-else {
-	hasHover = isBrowser
-}
-
-module.exports = hasHover
+
+
+var isBrowser = __webpack_require__(24200)
+var hasHover
+
+if (typeof __webpack_require__.g.matchMedia === 'function') {
+	hasHover = !__webpack_require__.g.matchMedia('(hover: none)').matches
+}
+else {
+	hasHover = isBrowser
+}
+
+module.exports = hasHover
 
 
 /***/ }),
@@ -87412,30 +87412,30 @@ module.exports = hasHover
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 "use strict";
-
-
-var isBrowser = __webpack_require__(24200)
-
-function detect() {
-	var supported = false
-
-	try {
-		var opts = Object.defineProperty({}, 'passive', {
-			get: function() {
-				supported = true
-			}
-		})
-
-		window.addEventListener('test', null, opts)
-		window.removeEventListener('test', null, opts)
-	} catch(e) {
-		supported = false
-	}
-
-	return supported
-}
-
-module.exports = isBrowser && detect()
+
+
+var isBrowser = __webpack_require__(24200)
+
+function detect() {
+	var supported = false
+
+	try {
+		var opts = Object.defineProperty({}, 'passive', {
+			get: function() {
+				supported = true
+			}
+		})
+
+		window.addEventListener('test', null, opts)
+		window.removeEventListener('test', null, opts)
+	} catch(e) {
+		supported = false
+	}
+
+	return supported
+}
+
+module.exports = isBrowser && detect()
 
 
 /***/ }),
@@ -88021,41 +88021,41 @@ module.exports = function shimNumberIsNaN() {
 /***/ (function(module) {
 
 "use strict";
-
-
-/**
- * Is this string all whitespace?
- * This solution kind of makes my brain hurt, but it's significantly faster
- * than !str.trim() or any other solution I could find.
- *
- * whitespace codes from: http://en.wikipedia.org/wiki/Whitespace_character
- * and verified with:
- *
- *  for(var i = 0; i < 65536; i++) {
- *      var s = String.fromCharCode(i);
- *      if(+s===0 && !s.trim()) console.log(i, s);
- *  }
- *
- * which counts a couple of these as *not* whitespace, but finds nothing else
- * that *is* whitespace. Note that charCodeAt stops at 16 bits, but it appears
- * that there are no whitespace characters above this, and code points above
- * this do not map onto white space characters.
- */
-
-module.exports = function(str){
-    var l = str.length,
-        a;
-    for(var i = 0; i < l; i++) {
-        a = str.charCodeAt(i);
-        if((a < 9 || a > 13) && (a !== 32) && (a !== 133) && (a !== 160) &&
-            (a !== 5760) && (a !== 6158) && (a < 8192 || a > 8205) &&
-            (a !== 8232) && (a !== 8233) && (a !== 8239) && (a !== 8287) &&
-            (a !== 8288) && (a !== 12288) && (a !== 65279)) {
-                return false;
-        }
-    }
-    return true;
-}
+
+
+/**
+ * Is this string all whitespace?
+ * This solution kind of makes my brain hurt, but it's significantly faster
+ * than !str.trim() or any other solution I could find.
+ *
+ * whitespace codes from: http://en.wikipedia.org/wiki/Whitespace_character
+ * and verified with:
+ *
+ *  for(var i = 0; i < 65536; i++) {
+ *      var s = String.fromCharCode(i);
+ *      if(+s===0 && !s.trim()) console.log(i, s);
+ *  }
+ *
+ * which counts a couple of these as *not* whitespace, but finds nothing else
+ * that *is* whitespace. Note that charCodeAt stops at 16 bits, but it appears
+ * that there are no whitespace characters above this, and code points above
+ * this do not map onto white space characters.
+ */
+
+module.exports = function(str){
+    var l = str.length,
+        a;
+    for(var i = 0; i < l; i++) {
+        a = str.charCodeAt(i);
+        if((a < 9 || a > 13) && (a !== 32) && (a !== 133) && (a !== 160) &&
+            (a !== 5760) && (a !== 6158) && (a < 8192 || a > 8205) &&
+            (a !== 8232) && (a !== 8233) && (a !== 8239) && (a !== 8287) &&
+            (a !== 8288) && (a !== 12288) && (a !== 65279)) {
+                return false;
+        }
+    }
+    return true;
+}
 
 
 /***/ }),

src/plots/cartesian/index.js

@@ -130,21 +130,27 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
     var calcdata = gd.calcdata;
     var i;
 
+    // Traces is a list of trace indices to (re)plot. If it's not provided,
+    // then it's a complete replot so we create a new list and add all trace indices
+    // which are in calcdata.
+
     if(!Array.isArray(traces)) {
         // If traces is not provided, then it's a complete replot and missing
         // traces are removed
         traces = [];
         for(i = 0; i < calcdata.length; i++) traces.push(i);
     }
 
+    // For each subplot
     for(i = 0; i < subplots.length; i++) {
         var subplot = subplots[i];
         var subplotInfo = fullLayout._plots[subplot];
 
-        // Get all calcdata for this subplot:
+        // Get all calcdata (traces) for this subplot:
         var cdSubplot = [];
         var pcd;
 
+        // For each trace
         for(var j = 0; j < calcdata.length; j++) {
             var cd = calcdata[j];
             var trace = cd[0].trace;
@@ -178,7 +184,7 @@ exports.plot = function(gd, traces, transitionOpts, makeOnCompleteCallback) {
                 pcd = cd;
             }
         }
-
+        // Plot the traces for this subplot
         plotOne(gd, subplotInfo, cdSubplot, transitionOpts, makeOnCompleteCallback);
     }
 };
@@ -189,41 +195,60 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
     var modules = fullLayout._modules;
     var _module, cdModuleAndOthers, cdModule;
 
+    // Separate traces by zindex and plot each zindex group separately
+    // TODO: Performance
+    var traceZindexGroups = {};
+    for(var t = 0; t < cdSubplot.length; t++) {
+        var trace = cdSubplot[t][0].trace;
+        var zi = trace.zindex || 0;
+        if(!traceZindexGroups[zi]) traceZindexGroups[zi] = [];
+        traceZindexGroups[zi].push(cdSubplot[t]);
+    }
+
     var layerData = [];
     var zoomScaleQueryParts = [];
 
-    for(var i = 0; i < modules.length; i++) {
-        _module = modules[i];
-        var name = _module.name;
-        var categories = Registry.modules[name].categories;
-
-        if(categories.svg) {
-            var className = (_module.layerName || name + 'layer');
-            var plotMethod = _module.plot;
-
-            // plot all visible traces of this type on this subplot at once
-            cdModuleAndOthers = getModuleCalcData(cdSubplot, plotMethod);
-            cdModule = cdModuleAndOthers[0];
-            // don't need to search the found traces again - in fact we need to NOT
-            // so that if two modules share the same plotter we don't double-plot
-            cdSubplot = cdModuleAndOthers[1];
-
-            if(cdModule.length) {
-                layerData.push({
-                    i: traceLayerClasses.indexOf(className),
-                    className: className,
-                    plotMethod: plotMethod,
-                    cdModule: cdModule
-                });
-            }
+    // Plot each zindex group in ascending order
+    var zindices = Object.keys(traceZindexGroups)
+        .map(Number)
+        .sort(function(a, b) { return a - b; });
+    for(var z = 0; z < zindices.length; z++) {
+        var zindex = zindices[z];
+        // For each "module" (trace type)
+        for(var i = 0; i < modules.length; i++) {
+            _module = modules[i];
+            var name = _module.name;
+            var categories = Registry.modules[name].categories;
+
+            if(categories.svg) {
+                var className = (_module.layerName || name + 'layer') + (zindex ? '-' + z : '');
+                var plotMethod = _module.plot;
+
+                // plot all visible traces of this type on this subplot at once
+                cdModuleAndOthers = getModuleCalcData(cdSubplot, plotMethod, zindex);
+                cdModule = cdModuleAndOthers[0];
+                // don't need to search the found traces again - in fact we need to NOT
+                // so that if two modules share the same plotter we don't double-plot
+                cdSubplot = cdModuleAndOthers[1];
+
+                if(cdModule.length) {
+                    layerData.push({
+                        i: traceLayerClasses.indexOf(className),
+                        zindex: z,
+                        className: className,
+                        plotMethod: plotMethod,
+                        cdModule: cdModule
+                    });
+                }
 
-            if(categories.zoomScale) {
-                zoomScaleQueryParts.push('.' + className);
+                if(categories.zoomScale) {
+                    zoomScaleQueryParts.push('.' + className);
+                }
             }
         }
     }
-
-    layerData.sort(function(a, b) { return a.i - b.i; });
+    // Sort the layers primarily by z, then by i
+    layerData.sort(function(a, b) { return a.zindex - b.zindex || a.i - b.i; });
 
     var layers = plotinfo.plot.selectAll('g.mlayer')
         .data(layerData, function(d) { return d.className; });
@@ -434,7 +459,6 @@ function makeSubplotData(gd) {
         }
         subplotData[i] = d;
     }
-
     return subplotData;
 }
 

src/plots/get_data.js

@@ -39,10 +39,10 @@ exports.getSubplotCalcData = function(calcData, type, subplotId) {
  * @param {array} calcdata: as in gd.calcdata
  * @param {object|string|fn} arg1:
  *  the plotting module, or its name, or its plot method
- *
+ * @param {int} arg2: (optional) zindex to filter on
  * @return {array[array]} [foundCalcdata, remainingCalcdata]
  */
-exports.getModuleCalcData = function(calcdata, arg1) {
+exports.getModuleCalcData = function(calcdata, arg1, arg2) {
     var moduleCalcData = [];
     var remainingCalcData = [];
 
@@ -57,10 +57,12 @@ exports.getModuleCalcData = function(calcdata, arg1) {
     if(!plotMethod) {
         return [moduleCalcData, calcdata];
     }
+    var zindex = arg2;
 
     for(var i = 0; i < calcdata.length; i++) {
         var cd = calcdata[i];
         var trace = cd[0].trace;
+        var filterByZ = (trace.zindex !== undefined);
         // N.B.
         // - 'legendonly' traces do not make it past here
         // - skip over 'visible' traces that got trimmed completely during calc transforms
@@ -70,7 +72,7 @@ exports.getModuleCalcData = function(calcdata, arg1) {
         // would suggest), but by 'module plot method' so that if some traces
         // share the same module plot method (e.g. bar and histogram), we
         // only call it one!
-        if(trace._module && trace._module.plot === plotMethod) {
+        if(trace._module && trace._module.plot === plotMethod && (!filterByZ || trace.zindex === zindex)) {
             moduleCalcData.push(cd);
         } else {
             remainingCalcData.push(cd);

src/traces/bar/attributes.js

@@ -226,6 +226,7 @@ module.exports = {
         textfont: scatterAttrs.unselected.textfont,
         editType: 'style'
     },
+    zindex: scatterAttrs.zindex,
 
     _deprecated: {
         bardir: {

src/traces/bar/defaults.js

@@ -29,6 +29,8 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
     coerce('xhoverformat');
     coerce('yhoverformat');
 
+    coerce('zindex');
+
     coerce('orientation', (traceOut.x && !traceOut.y) ? 'h' : 'v');
     coerce('base');
     coerce('offset');

src/traces/bar/style.js

@@ -14,7 +14,7 @@ var attributeOutsideTextFont = attributes.outsidetextfont;
 var helpers = require('./helpers');
 
 function style(gd) {
-    var s = d3.select(gd).selectAll('g.barlayer').selectAll('g.trace');
+    var s = d3.select(gd).selectAll('g[class^="barlayer"]').selectAll('g.trace');
     resizeText(gd, s, 'bar');
 
     var barcount = s.size();

src/traces/image/attributes.js

@@ -133,5 +133,15 @@ module.exports = extendFlat({
         keys: ['z', 'color', 'colormodel']
     }),
 
-    transforms: undefined
+    transforms: undefined,
+    zindex: {
+        valType: 'integer',
+        dflt: 0,
+        editType: 'calc',
+        description: [
+            'Sets the layer on which this trace is displayed, relative to ',
+            'other traces on the same axes. Traces with higher `zindex` ',
+            'appear in front of those with lower `zindex`.'
+        ].join(' ')
+    }
 });

src/traces/image/defaults.js

@@ -45,4 +45,6 @@ module.exports = function supplyDefaults(traceIn, traceOut) {
     coerce('hovertemplate');
 
     traceOut._length = null;
+
+    coerce('zindex');
 };

src/traces/scatter/attributes.js

@@ -686,4 +686,14 @@ module.exports = {
         arrayOk: true,
         description: 'Sets the text font.'
     }),
+    zindex: {
+        valType: 'integer',
+        dflt: 0,
+        editType: 'calc',
+        description: [
+            'Sets the layer on which this trace is displayed, relative to ',
+            'other traces on the same axes. Traces with higher `zindex` ',
+            'appear in front of those with lower `zindex`.'
+        ].join(' ')
+    }
 };