Fix #2392 - clean up removed axes

Author: alexcjohnson

src/plots/cartesian/index.js

@@ -306,6 +306,17 @@ exports.clean = function(newFullData, newFullLayout, oldFullData, oldFullLayout)
         purgeSubplotLayers(oldFullLayout._cartesianlayer.selectAll('.subplot'), oldFullLayout);
         oldFullLayout._defs.selectAll('.axesclip').remove();
     }
+    // otherwise look for subplots we need to remove
+    else if(oldSubplotList.cartesian) {
+        for(i = 0; i < oldSubplotList.cartesian.length; i++) {
+            var oldSubplotId = oldSubplotList.cartesian[i];
+            if(newSubplotList.cartesian.indexOf(oldSubplotId) === -1) {
+                var selector = '.' + oldSubplotId + ',.' + oldSubplotId + '-x,.' + oldSubplotId + '-y';
+                oldFullLayout._cartesianlayer.selectAll(selector).remove();
+                removeSubplotExtras(oldSubplotId, oldFullLayout);
+            }
+        }
+    }
 };
 
 exports.drawFramework = function(gd) {
@@ -484,11 +495,9 @@ function purgeSubplotLayers(layers, fullLayout) {
 
     layers.each(function(subplotId) {
         var plotgroup = d3.select(this);
-        var clipId = 'clip' + fullLayout._uid + subplotId + 'plot';
 
         plotgroup.remove();
-        fullLayout._draggers.selectAll('g.' + subplotId).remove();
-        fullLayout._defs.select('#' + clipId).remove();
+        removeSubplotExtras(subplotId, fullLayout);
 
         overlayIdsToRemove[subplotId] = true;
 
@@ -515,6 +524,11 @@ function purgeSubplotLayers(layers, fullLayout) {
     }
 }
 
+function removeSubplotExtras(subplotId, fullLayout) {
+    fullLayout._draggers.selectAll('g.' + subplotId).remove();
+    fullLayout._defs.select('#clip' + fullLayout._uid + subplotId + 'plot').remove();
+}
+
 function joinLayer(parent, nodeType, className, dataVal) {
     var layer = parent.selectAll('.' + className)
         .data([dataVal || 0]);

test/jasmine/tests/cartesian_test.js

@@ -345,6 +345,29 @@ describe('subplot creation / deletion:', function() {
         .then(done);
     });
 
+    it('should remove unused axes when deleting traces', function(done) {
+        Plotly.newPlot(gd,
+            [{y: [1, 2, 3]}, {y: [10, 30, 20], yaxis: 'y2'}],
+            {yaxis2: {side: 'right', overlaying: 'y', title: 'Hi!'}}
+        )
+        .then(function() {
+            expect(gd.querySelectorAll('.xy2,.xy2-x,.xy2-y').length).not.toBe(0);
+            expect(gd.querySelectorAll('.y2title').length).toBe(1);
+            expect(gd._fullLayout._subplots.cartesian).toEqual(['xy', 'xy2']);
+            expect(gd._fullLayout._subplots.yaxis).toEqual(['y', 'y2']);
+
+            return Plotly.deleteTraces(gd, [1]);
+        })
+        .then(function() {
+            expect(gd.querySelectorAll('.xy2,.xy2-x,.xy2-y').length).toBe(0);
+            expect(gd.querySelectorAll('.y2title').length).toBe(0);
+            expect(gd._fullLayout._subplots.cartesian).toEqual(['xy']);
+            expect(gd._fullLayout._subplots.yaxis).toEqual(['y']);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('puts plot backgrounds behind everything except if they overlap', function(done) {
         function checkBGLayers(behindCount, x2y2Count) {
             expect(gd.querySelectorAll('.bglayer rect.bg').length).toBe(behindCount);