Match Cartesian axes with identical invisible reference

src/plots/cartesian/constraints.js

@@ -19,6 +19,7 @@ var FROM_BL = require('../../constants/alignment').FROM_BL;
 
 exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, opts) {
     var allAxisIds = opts.allAxisIds;
+    var layoutIn = opts.layoutIn;
     var layoutOut = opts.layoutOut;
     var scaleanchorDflt = opts.scaleanchorDflt;
     var constrainDflt = opts.constrainDflt;
@@ -44,8 +45,30 @@ exports.handleConstraintDefaults = function(containerIn, containerOut, coerce, o
     var matches, matchOpts;
 
     if((containerIn.matches || splomStash.matches) && !containerOut.fixedrange) {
+        var copyContainerIn = containerIn; // deep copy may not be needed
+        if(!splomStash.matches) {
+            var m = copyContainerIn.matches;
+            if(allAxisIds.indexOf(m) === -1) {
+                // in case e.g. x was not listed in allAxisIds
+                // attempt linking x2, x3 to each other if both were linked to x
+                // see https://github.com/plotly/plotly.js/issues/4501
+
+                for(var q = 0; q < allAxisIds.length - 1; q++) {
+                    var idQ = allAxisIds[q];
+                    var nameQ = id2name(idQ);
+                    if(m === layoutIn[nameQ].matches) {
+                        // now make a deep copy to avoid mutate input data
+                        copyContainerIn = Lib.extendDeep({}, containerIn);
+
+                        copyContainerIn.matches = idQ;
+                        break;
+                    }
+                }
+            }
+        }
+
         matchOpts = getConstraintOpts(matchGroups, thisID, allAxisIds, layoutOut);
-        matches = Lib.coerce(containerIn, containerOut, {
+        matches = Lib.coerce(copyContainerIn, containerOut, {
             matches: {
                 valType: 'enumerated',
                 values: matchOpts.linkableAxes || [],

src/plots/cartesian/layout_defaults.js

@@ -314,6 +314,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 
         handleConstraintDefaults(axLayoutIn, axLayoutOut, coerce, {
             allAxisIds: allAxisIds,
+            layoutIn: layoutIn,
             layoutOut: layoutOut,
             scaleanchorDflt: scaleanchorDflt,
             constrainDflt: constrainDflt

src/plots/plots.js

@@ -1272,10 +1272,13 @@ plots.supplyTraceDefaults = function(traceIn, traceOut, colorIndex, layout, trac
             var subplots = layout._subplots;
             var subplotId = '';
 
-            // TODO - currently if we draw an empty gl2d subplot, it draws
-            // nothing then gets stuck and you can't get it back without newPlot
-            // sort this out in the regl refactor? but for now just drop empty gl2d subplots
-            if(basePlotModule.name !== 'gl2d' || visible) {
+            if(
+                visible ||
+                basePlotModule.name !== 'gl2d' // for now just drop empty gl2d subplots
+                // TODO - currently if we draw an empty gl2d subplot, it draws
+                // nothing then gets stuck and you can't get it back without newPlot
+                // sort this out in the regl refactor?
+            ) {
                 if(Array.isArray(subplotAttr)) {
                     for(i = 0; i < subplotAttr.length; i++) {
                         var attri = subplotAttr[i];

test/jasmine/tests/axes_test.js

@@ -1253,6 +1253,86 @@ describe('Test axes', function() {
         });
     });
 
+    describe('find matching axes', function() {
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(destroyGraphDiv);
+
+        it('should match groups even with temp reference', function(done) {
+            // see https://github.com/plotly/plotly.js/issues/4501
+
+            var x = [1, 2, 3];
+            var y = [1, 3, 2];
+
+            Plotly.plot(gd, {
+                data: [
+                    {
+                        xaxis: 'x2',
+                        yaxis: 'y2',
+
+                        type: 'bar',
+                        name: 'x2.y2',
+                        x: x,
+                        y: y
+                    },
+                    {
+                        xaxis: 'x3',
+                        yaxis: 'y3',
+
+                        type: 'bar',
+                        name: 'x3.y3',
+                        x: x,
+                        y: y
+                    }
+                ],
+                layout: {
+                    title: {
+                        text: 'Should pan together since x and y are referenced in the layout.'
+                    },
+                    xaxis: {
+                        domain: [0, 0.48]
+                    },
+                    xaxis2: {
+                        matches: 'x',
+                        anchor: 'y2',
+                        domain: [0.52, 1]
+                    },
+                    xaxis3: {
+                        matches: 'x',
+                        anchor: 'y3',
+                        domain: [0, 0.48]
+                    },
+                    yaxis: {
+                        domain: [0, 0.48]
+                    },
+                    yaxis2: {
+                        matches: 'y',
+                        anchor: 'x2',
+                        domain: [0.52, 1]
+                    },
+                    yaxis3: {
+                        matches: 'y',
+                        anchor: 'x3',
+                        domain: [0.52, 1]
+                    }
+                }
+            })
+            .then(function() {
+                expect(gd._fullLayout.xaxis3.matches).toBe('x2'); // not x
+                expect(gd._fullLayout.yaxis3.matches).toBe('y2'); // not x
+                expect(gd._fullLayout._axisMatchGroups.length).toBe(2);
+                expect(gd._fullLayout._axisMatchGroups).toContain({x2: 1, x3: 1});
+                expect(gd._fullLayout._axisMatchGroups).toContain({y2: 1, y3: 1});
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
+
     describe('matching axes relayout calls', function() {
         var gd;