Merge pull request #5589 from plotly/fix5402-hide-overlapping-inside-labels

Take into account inside labels of overlaid axes in when hiding labels on the counter axis

Author: archmoj

src/plots/cartesian/axes.js

@@ -3124,49 +3124,70 @@ axes.drawLabels = function(gd, ax, opts) {
             } // TODO: hide mathjax?
         });
 
-        if(ax._anchorAxis) {
-            ax._anchorAxis._visibleLabelMin = visibleLabelMin;
-            ax._anchorAxis._visibleLabelMax = visibleLabelMax;
+        for(var subplot in fullLayout._plots) {
+            var plotinfo = fullLayout._plots[subplot];
+            if(ax._id !== plotinfo.xaxis._id && ax._id !== plotinfo.yaxis._id) continue;
+            var anchorAx = isX ? plotinfo.yaxis : plotinfo.xaxis;
+            if(anchorAx) {
+                anchorAx['_visibleLabelMin_' + ax._id] = visibleLabelMin;
+                anchorAx['_visibleLabelMax_' + ax._id] = visibleLabelMax;
+            }
         }
     };
 
     ax._hideCounterAxisInsideTickLabels = function(partialOpts) {
-        if(insideTicklabelposition(ax._anchorAxis || {})) {
-            (partialOpts || [
-                ZERO_PATH,
-                GRID_PATH,
-                TICK_PATH,
-                TICK_TEXT
-            ]).forEach(function(e) {
-                var isPeriodLabel =
-                    e.K === 'tick' &&
-                    e.L === 'text' &&
-                    ax.ticklabelmode === 'period';
-
-                var sel;
-                if(e.K === ZERO_PATH.K) sel = opts.plotinfo.zerolinelayer.selectAll('.' + ax._id + 'zl');
-                else if(e.K === GRID_PATH.K) sel = opts.plotinfo.gridlayer.selectAll('.' + ax._id);
-                else sel = opts.plotinfo[ax._id.charAt(0) + 'axislayer'];
-
-                sel.each(function() {
-                    var w = d3.select(this);
-                    if(e.L) w = w.selectAll(e.L);
-
-                    w.each(function(d) {
-                        var q = ax.l2p(
-                            isPeriodLabel ? getPosX(d) : d.x
-                        ) + ax._offset;
-
-                        var t = d3.select(this);
-                        if(q < ax._visibleLabelMax && q > ax._visibleLabelMin) {
-                            t.style('display', 'none'); // hidden
-                        } else if(e.K === 'tick') {
-                            t.style('display', null); // visible
-                        }
+        var isX = ax._id.charAt(0) === 'x';
+
+        var anchoredAxes = [];
+        for(var subplot in fullLayout._plots) {
+            var plotinfo = fullLayout._plots[subplot];
+            if(ax._id !== plotinfo.xaxis._id && ax._id !== plotinfo.yaxis._id) continue;
+            anchoredAxes.push(isX ? plotinfo.yaxis : plotinfo.xaxis);
+        }
+
+        anchoredAxes.forEach(function(anchorAx, idx) {
+            if(anchorAx && insideTicklabelposition(anchorAx)) {
+                (partialOpts || [
+                    ZERO_PATH,
+                    GRID_PATH,
+                    TICK_PATH,
+                    TICK_TEXT
+                ]).forEach(function(e) {
+                    var isPeriodLabel =
+                        e.K === 'tick' &&
+                        e.L === 'text' &&
+                        ax.ticklabelmode === 'period';
+
+                    var mainPlotinfo = fullLayout._plots[ax._mainSubplot];
+
+                    var sel;
+                    if(e.K === ZERO_PATH.K) sel = mainPlotinfo.zerolinelayer.selectAll('.' + ax._id + 'zl');
+                    else if(e.K === GRID_PATH.K) sel = mainPlotinfo.gridlayer.selectAll('.' + ax._id);
+                    else sel = mainPlotinfo[ax._id.charAt(0) + 'axislayer'];
+
+                    sel.each(function() {
+                        var w = d3.select(this);
+                        if(e.L) w = w.selectAll(e.L);
+
+                        w.each(function(d) {
+                            var q = ax.l2p(
+                                isPeriodLabel ? getPosX(d) : d.x
+                            ) + ax._offset;
+
+                            var t = d3.select(this);
+                            if(
+                                q < ax['_visibleLabelMax_' + anchorAx._id] &&
+                                q > ax['_visibleLabelMin_' + anchorAx._id]
+                            ) {
+                                t.style('display', 'none'); // hidden
+                            } else if(e.K === 'tick' && !idx) {
+                                t.style('display', null); // visible
+                            }
+                        });
                     });
                 });
-            });
-        }
+            }
+        });
     };
 
     // make sure all labels are correctly positioned at their base angle

test/image/baselines/ticklabelposition-overlay2.png

@@ -0,0 +1,65 @@
+{
+    "data": [
+        {
+            "y": [0, 100],
+            "yaxis": "y"
+        },
+        {
+            "y": [100, 0],
+            "yaxis": "y2"
+        },
+        {
+            "x": [0, 100],
+            "xaxis": "x2",
+            "yaxis": "y3"
+        },
+        {
+            "x": [100, 0],
+            "xaxis": "x3",
+            "yaxis": "y3"
+        }
+    ],
+    "layout": {
+        "width": 300,
+        "height": 400,
+        "margin": {
+            "t": 40,
+            "b": 40,
+            "l": 40,
+            "r": 40
+        },
+        "plot_bgcolor": "lightblue",
+        "showlegend": false,
+        "yaxis": {
+            "domain" : [0, 0.45],
+            "anchor": "x",
+            "ticklabelposition": "inside",
+            "side": "left"
+        },
+        "yaxis2": {
+            "overlaying": "y",
+            "anchor": "x",
+            "ticklabelposition": "inside",
+            "side": "right"
+        },
+        "yaxis3": {
+            "anchor": "x3",
+            "domain" : [0.55, 1],
+            "range": [-1.1, 2.1]
+        },
+        "xaxis": {
+            "range": [-1.1, 2.1]
+        },
+        "xaxis2": {
+            "overlaying": "x3",
+            "anchor": "y3",
+            "ticklabelposition": "inside",
+            "side": "bottom"
+        },
+        "xaxis3": {
+            "anchor": "y3",
+            "ticklabelposition": "inside",
+            "side": "top"
+        }
+    }
+}

test/image/mocks/ticklabelposition-overlay2.json

@@ -983,6 +983,7 @@ var list = [
     'ticklabelposition-c',
     'ticklabelposition-d',
     'ticklabelposition-overlay',
+    'ticklabelposition-overlay2',
     'tickson_boundaries',
     'titles-avoid-labels',
     'trace_metatext',
@@ -2082,6 +2083,7 @@ figs['ticklabelposition-b'] = require('@mocks/ticklabelposition-b');
 figs['ticklabelposition-c'] = require('@mocks/ticklabelposition-c');
 figs['ticklabelposition-d'] = require('@mocks/ticklabelposition-d');
 figs['ticklabelposition-overlay'] = require('@mocks/ticklabelposition-overlay');
+figs['ticklabelposition-overlay2'] = require('@mocks/ticklabelposition-overlay2');
 figs['tickson_boundaries'] = require('@mocks/tickson_boundaries');
 // figs['titles-avoid-labels'] = require('@mocks/titles-avoid-labels');
 // figs['trace_metatext'] = require('@mocks/trace_metatext');