Merge pull request #3435 from plotly/legend-valign-fix

legend valign fix for pie traces

Author: etpinard

src/components/legend/draw.js

@@ -108,20 +108,20 @@ module.exports = function draw(gd) {
     traces.enter().append('g').attr('class', 'traces');
     traces.exit().remove();
 
-    traces.call(style, gd)
-        .style('opacity', function(d) {
-            var trace = d[0].trace;
-            if(Registry.traceIs(trace, 'pie')) {
-                return hiddenSlices.indexOf(d[0].label) !== -1 ? 0.5 : 1;
-            } else {
-                return trace.visible === 'legendonly' ? 0.5 : 1;
-            }
-        })
-        .each(function() {
-            d3.select(this)
-                .call(drawTexts, gd, maxLength)
-                .call(setupTraceToggle, gd);
-        });
+    traces.style('opacity', function(d) {
+        var trace = d[0].trace;
+        if(Registry.traceIs(trace, 'pie')) {
+            return hiddenSlices.indexOf(d[0].label) !== -1 ? 0.5 : 1;
+        } else {
+            return trace.visible === 'legendonly' ? 0.5 : 1;
+        }
+    })
+    .each(function() {
+        d3.select(this)
+            .call(drawTexts, gd, maxLength)
+            .call(setupTraceToggle, gd);
+    })
+    .call(style, gd);
 
     Lib.syncOrAsync([Plots.previousPromises,
         function() {
@@ -522,8 +522,7 @@ function computeTextDimensions(g, gd) {
         width = mathjaxBB.width;
 
         Drawing.setTranslate(mathjaxGroup, 0, (height / 4));
-    }
-    else {
+    } else {
         var text = g.select('.legendtext');
         var textLines = svgTextUtils.lineCount(text);
         var textNode = text.node();
@@ -535,12 +534,10 @@ function computeTextDimensions(g, gd) {
         // to avoid getBoundingClientRect
         var textY = lineHeight * (0.3 + (1 - textLines) / 2);
         svgTextUtils.positionText(text, constants.textOffsetX, textY);
-        legendItem.lineHeight = lineHeight;
     }
 
-    height = Math.max(height, 16) + 3;
-
-    legendItem.height = height;
+    legendItem.lineHeight = lineHeight;
+    legendItem.height = Math.max(height, 16) + 3;
     legendItem.width = width;
 }
 

src/components/legend/style.js

@@ -31,7 +31,7 @@ module.exports = function style(s, gd) {
         var height = d[0].height;
 
         if(valign === 'middle' || !lineHeight || !height) {
-            layers.attr('transform', null); // this here is a fun d3 trick to unset DOM attributes
+            layers.attr('transform', null);
         } else {
             var factor = {top: 1, bottom: -1}[valign];
             var markerOffsetY = factor * (0.5 * (lineHeight - height + 3));

test/image/baselines/legend_valign_top.png

@@ -10,15 +10,22 @@
       "name": "Also super long name<br>Also super long name<br>Also super long name",
       "type": "scatter",
       "showlegend": true
+    },
+    {
+        "type": "pie",
+        "labels": ["a very<br>long<br>legend item", "a", "b", "c"],
+        "values": [10, 15, 13, 17],
+        "domain": {"x": [0.5, 1]}
     }
   ],
   "layout": {
     "width": 800,
+    "xaxis": {"domain": [0, 0.5]},
     "legend": {
       "bgcolor": "rgba(0,255,255,1)",
       "valign": "top",
       "font": {
-        "size": 20
+        "size": 10
       }
     }
   }