Merge pull request #1204 from plotly/legend-line-opacity

Apply trace opacity to 'mode: 'lines' legend items

Author: etpinard

src/components/legend/style.js

@@ -24,24 +24,29 @@ module.exports = function style(s) {
     s.each(function(d) {
         var traceGroup = d3.select(this);
 
-        var fill = traceGroup
+        var layers = traceGroup.selectAll('g.layers')
+            .data([0]);
+        layers.enter().append('g')
+            .classed('layers', true);
+        layers.style('opacity', d[0].trace.opacity);
+
+        var fill = layers
             .selectAll('g.legendfill')
                 .data([d]);
         fill.enter().append('g')
             .classed('legendfill', true);
 
-        var line = traceGroup
+        var line = layers
             .selectAll('g.legendlines')
                 .data([d]);
         line.enter().append('g')
             .classed('legendlines', true);
 
-        var symbol = traceGroup
+        var symbol = layers
             .selectAll('g.legendsymbols')
                 .data([d]);
         symbol.enter().append('g')
             .classed('legendsymbols', true);
-        symbol.style('opacity', d[0].trace.opacity);
 
         symbol.selectAll('g.legendpoints')
             .data([d])

test/image/baselines/17.png

@@ -14,7 +14,10 @@
         17
       ],
       "mode": "markers",
-      "type": "scatter"
+      "type": "scatter",
+      "marker": {
+        "opacity": 0.5
+      }
     },
     {
       "x": [
@@ -30,7 +33,8 @@
         9
       ],
       "mode": "lines",
-      "type": "scatter"
+      "type": "scatter",
+      "opacity": 0.5
     },
     {
       "x": [
@@ -46,7 +50,18 @@
         12
       ],
       "mode": "lines+markers",
-      "type": "scatter"
+      "type": "scatter",
+      "opacity": 0.707,
+      "marker": {
+        "opacity": 0.707
+      }
+    },
+    {
+      "x": [1, 2, 3],
+      "y": [1, 2, 3],
+      "opacity": 0.2,
+      "line": { "width": 10, "color": "red"},
+      "marker": { "size": 20, "color": "blue"}
     }
   ]
 }