Merge pull request #3354 from plotly/multicategory-y-axis-clearence

Clear y-axis multicategory secondary ticks and dividers

Author: etpinard

src/plots/cartesian/axes.js

@@ -1585,9 +1585,13 @@ axes.draw = function(gd, arg, opts) {
             plotinfo.xaxislayer.selectAll('.' + xa._id + 'tick').remove();
             plotinfo.yaxislayer.selectAll('.' + ya._id + 'tick').remove();
             plotinfo.xaxislayer.selectAll('.' + xa._id + 'tick2').remove();
+            plotinfo.yaxislayer.selectAll('.' + ya._id + 'tick2').remove();
             plotinfo.xaxislayer.selectAll('.' + xa._id + 'divider').remove();
+            plotinfo.yaxislayer.selectAll('.' + ya._id + 'divider').remove();
+
             if(plotinfo.gridlayer) plotinfo.gridlayer.selectAll('path').remove();
             if(plotinfo.zerolinelayer) plotinfo.zerolinelayer.selectAll('path').remove();
+
             fullLayout._infolayer.select('.g-' + xa._id + 'title').remove();
             fullLayout._infolayer.select('.g-' + ya._id + 'title').remove();
         });

test/jasmine/tests/cartesian_test.js

@@ -907,4 +907,65 @@ describe('subplot creation / deletion:', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('clears secondary labels and divider when updating out of axis type multicategory (y-axis case)', function(done) {
+        function _assert(msg, exp) {
+            var gd3 = d3.select(gd);
+            expect(gd3.selectAll('.ytick > text').size())
+                .toBe(exp.tickCnt, msg + ' # labels');
+            expect(gd3.selectAll('.ytick2 > text').size())
+                .toBe(exp.tick2Cnt, msg + ' # secondary labels');
+            expect(gd3.selectAll('.ydivider').size())
+                .toBe(exp.dividerCnt, msg + ' # dividers');
+        }
+
+        Plotly.react(gd, [{
+            type: 'bar',
+            orientation: 'h',
+            y: ['a', 'b', 'c'],
+            x: [1, 2, 1]
+        }])
+        .then(function() {
+            _assert('base - category axis', {
+                tickCnt: 3,
+                tick2Cnt: 0,
+                dividerCnt: 0
+            });
+        })
+        .then(function() {
+            return Plotly.react(gd, [{
+                type: 'bar',
+                orientation: 'h',
+                y: [
+                    ['d', 'd', 'e'],
+                    ['a', 'b', 'c']
+                ],
+                x: [1, 2, 3]
+            }]);
+        })
+        .then(function() {
+            _assert('multicategory axis', {
+                tickCnt: 3,
+                tick2Cnt: 2,
+                dividerCnt: 3
+            });
+        })
+        .then(function() {
+            return Plotly.react(gd, [{
+                type: 'bar',
+                orientation: 'h',
+                y: ['a', 'b', 'c'],
+                x: [1, 2, 1]
+            }]);
+        })
+        .then(function() {
+            _assert('back to category axis', {
+                tickCnt: 3,
+                tick2Cnt: 0,
+                dividerCnt: 0
+            });
+        })
+        .catch(failTest)
+        .then(done);
+    });
 });