Merge pull request plotly#6962 from plotly/fix6955-zorder

Maintain original drawing order of traces when traces with similar type are sent to back

Author: archmoj

draftlogs/6962_fix.md

@@ -0,0 +1 @@
+ - Maintain original drawing order of traces when traces with similar type are sent to back [[#6962](https://github.com/plotly/plotly.js/pull/6962)]

src/plots/cartesian/index.js

@@ -221,7 +221,8 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
             var categories = Registry.modules[name].categories;
 
             if(categories.svg) {
-                var className = (_module.layerName || name + 'layer') + (z ? Number(z) + 1 : '');
+                var classBaseName = (_module.layerName || name + 'layer');
+                var className = classBaseName + (z ? Number(z) + 1 : '');
                 var plotMethod = _module.plot;
 
                 // plot all visible traces of this type on this subplot at once
@@ -233,7 +234,7 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
 
                 if(cdModule.length) {
                     layerData.push({
-                        i: traceLayerClasses.indexOf(className),
+                        i: traceLayerClasses.indexOf(classBaseName),
                         zorder: z,
                         className: className,
                         plotMethod: plotMethod,
@@ -248,7 +249,12 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
         }
     }
     // Sort the layers primarily by z, then by i
-    layerData.sort(function(a, b) { return (a.zorder || 0) - (b.zorder || 0) || a.i - b.i; });
+    layerData.sort(function(a, b) {
+        return (
+            (a.zorder || 0) - (b.zorder || 0) ||
+            (a.i - b.i)
+        );
+    });
 
     var layers = plotinfo.plot.selectAll('g.mlayer')
         .data(layerData, function(d) { return d.className; });

test/image/baselines/zz-zorder_default-orders.png

@@ -0,0 +1,71 @@
+{
+    "data": [
+        {
+            "marker": {
+                "size": 10
+            },
+            "mode": "markers",
+            "name": "scatter",
+            "type": "scatter",
+            "x": [
+                1,
+                2,
+                3,
+                4,
+                5
+            ],
+            "y": [
+                2,
+                1,
+                6,
+                4,
+                4
+            ]
+        },
+        {
+            "name": "bar",
+            "type": "bar",
+            "x": [
+                1,
+                2,
+                3,
+                4,
+                5
+            ],
+            "y": [
+                1,
+                6,
+                3,
+                6,
+                1
+            ]
+        },
+        {
+            "mode": "lines",
+            "name": "line",
+            "type": "scatter",
+            "x": [
+                1,
+                2,
+                3,
+                4,
+                5
+            ],
+            "y": [
+                2,
+                3,
+                4,
+                3,
+                2
+            ],
+            "zorder": -1
+        }
+    ],
+    "layout": {
+        "width": 350,
+        "height": 350,
+        "title": {
+            "text": "Move line plot to back only"
+        }
+    }
+}