fix angular multi-line tick labels positioning

... by extracting getHeight axis label fn from Axes.drawLabels,
    and defining a custom fn for angular tick labels.

Author: etpinard

src/plots/cartesian/axes.js

@@ -2174,6 +2174,7 @@ axes.makeTickPath = function(ax, shift, sgn, len) {
  *  - {fn} xFn
  *  - {fn} yFn
  *  - {fn} anchorFn
+ *  - {fn} heightFn
  *  - {number} labelStandoff (gap parallel to ticks)
  *  - {number} labelShift (gap perpendicular to ticks)
  */
@@ -2218,6 +2219,11 @@ axes.makeLabelFns = function(ax, shift, angle) {
             }
             return (a * flipIt < 0) ? 'end' : 'start';
         };
+        out.heightFn = function(d, a, h) {
+            return (a < -60 || a > 60) ? -0.5 * h :
+                ax.side === 'top' ? -h :
+                0;
+        };
     } else if(axLetter === 'y') {
         flipIt = ax.side === 'right' ? 1 : -1;
         x0 = labelStandoff;
@@ -2232,6 +2238,12 @@ axes.makeLabelFns = function(ax, shift, angle) {
             }
             return ax.side === 'right' ? 'start' : 'end';
         };
+        out.heightFn = function(d, a, h) {
+            a *= ax.side === 'left' ? 1 : -1;
+            return a < -30 ? -h :
+                a < 30 ? -0.5 * h :
+                0;
+        };
     }
 
     return out;
@@ -2466,26 +2478,6 @@ axes.drawLabels = function(gd, ax, opts) {
         });
     }
 
-    // How much to shift a multi-line label to center it vertically.
-    function getAnchorHeight(lineCount, lineHeight, angle) {
-        var h = (lineCount - 1) * lineHeight;
-        if(axLetter === 'x') {
-            if(angle < -60 || 60 < angle) {
-                return -0.5 * h;
-            } else if(ax.side === 'top') {
-                return -h;
-            }
-        } else {
-            angle *= ax.side === 'left' ? 1 : -1;
-            if(angle < -30) {
-                return -h;
-            } else if(angle < 30) {
-                return -0.5 * h;
-            }
-        }
-        return 0;
-    }
-
     function positionLabels(s, angle) {
         s.each(function(d) {
             var thisLabel = d3.select(this);
@@ -2498,11 +2490,10 @@ axes.drawLabels = function(gd, ax, opts) {
                     (labelFns.yFn(d) - d.fontSize / 2) + ')') :
                 '');
 
-            var anchorHeight = getAnchorHeight(
-                svgTextUtils.lineCount(thisLabel),
-                LINE_SPACING * d.fontSize,
-                isNumeric(angle) ? +angle : 0
-            );
+            // how much to shift a multi-line label to center it vertically.
+            var nLines = svgTextUtils.lineCount(thisLabel);
+            var lineHeight = LINE_SPACING * d.fontSize;
+            var anchorHeight = labelFns.heightFn(d, isNumeric(angle) ? +angle : 0, (nLines - 1) * lineHeight);
 
             if(anchorHeight) {
                 transform += ' translate(0, ' + anchorHeight + ')';

src/plots/polar/polar.js

@@ -575,6 +575,11 @@ proto.updateAngularAxis = function(fullLayout, polarLayout) {
             (cos > 0 ? 'start' : 'end');
     };
 
+    labelFns.heightFn = function(d, a, h) {
+        var rad = t2g(d);
+        return -0.5 * (1 + Math.sin(rad)) * h;
+    };
+
     var newTickLayout = strTickLayout(angularLayout);
     if(_this.angularTickLayout !== newTickLayout) {
         layers['angular-axis'].selectAll('.' + ax._id + 'tick').remove();

test/image/baselines/polar_long-category-angular-labels.png

@@ -9,33 +9,73 @@
         "width": 4
       },
       "type": "scatterpolar",
-      "name": "Backfile"
+      "name": "Backfile",
+      "legendgroup": "Backfile"
     },
     {
       "r": [0.98, 0.98, 0.83, 0.89, 1, 1, 0.99, 0.96, 1, 0, 0, 0.98],
       "mode": "lines",
-      "theta": ["Abstracts", "Affiliations", "Award Numbers", "Funders", "Licenses", "Open References", "Orcids", "References", "Resource Links", "Similarity Checking", "Update Policies", "Abstracts" ],
+      "theta": ["Abstracts", "Affiliations", "Award Numbers", "Funders", "Licenses", "Open References", "Orcids", "References", "Resource Links", "Similarity Checking", "Update Policies", "Abstracts"],
+      "line": {
+        "color": "blue",
+        "width": 2
+      },
+      "type": "scatterpolar",
+      "name": "Current",
+      "legendgroup": "Current"
+    },
+    {
+      "r": [0.97, 0.97, 0.75, 0.83, 1, 1, 0.45, 0.97, 1, 0, 0.01, 0.97 ],
+      "mode": "lines",
+      "theta": ["Abstracts<br>Abstracts", "Affiliations<br>Affiliations", "Award<br>Numbers", "Funders<br>Funders", "Licenses<br>Licenses", "Open<br>References", "Orcids<br>Orcids<br>Orcids", "References<br>References", "Resource<br>Links", "Similarity<br>Checking", "Update<br>Policies", "Abstracts<br>Abstracts"],
+      "line": {
+        "color": "orangered",
+        "width": 4
+      },
+      "type": "scatterpolar",
+      "name": "Backfile",
+      "legendgroup": "Backfile",
+      "showlegend": false,
+      "subplot": "polar2"
+    },
+    {
+      "r": [0.98, 0.98, 0.83, 0.89, 1, 1, 0.99, 0.96, 1, 0, 0, 0.98],
+      "mode": "lines",
+      "theta": ["Abstracts<br>Abstracts", "Affiliations<br>Affiliations", "Award<br>Numbers", "Funders<br>Funders", "Licenses<br>Licenses", "Open<br>References", "Orcids<br>Orcids<br>Orcids", "References<br>References", "Resource<br>Links", "Similarity<br>Checking", "Update<br>Policies", "Abstracts<br>Abstracts"],
       "line": {
         "color": "blue",
         "width": 2
       },
       "type": "scatterpolar",
-      "name": "Current"
+      "name": "Current",
+      "legendgroup": "Current",
+      "showlegend": false,
+      "subplot": "polar2"
     }
   ],
   "layout": {
+    "grid": {"rows": 2, "columns": 1, "ygap": 0.15},
+    "height": 800,
     "polar": {
+      "domain": {"row": 0, "column": 0},
+      "angularaxis": {
+        "rotation": 90,
+        "direction": "clockwise"
+      }
+    },
+    "polar2": {
+      "domain": {"row": 1, "column": 0},
       "angularaxis": {
         "rotation": 90,
         "direction": "clockwise"
       }
     },
-    "showlegend": true,
     "legend": {
       "y": 0,
       "yanchor": "top",
       "x": 0,
-      "xanchor": "left"
+      "xanchor": "left",
+      "tracegroupgap": 0
     },
     "title": {
       "text": "eLife Sciences Publications<br>Ltd: journal-article (8.62 - 7.95 = 0.67)"