group legend item layers in one <g> and apply trace.opacity on it

Author: etpinard

src/components/legend/style.js

@@ -22,28 +22,31 @@ var stylePie = require('../../traces/pie/style_one');
 
 module.exports = function style(s) {
     s.each(function(d) {
-        var traceGroup = d3.select(this),
-            opacity = d[0].trace.opacity;
+        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);
-        line.style('opacity', opacity);
 
-        var symbol = traceGroup
+        var symbol = layers
             .selectAll('g.legendsymbols')
                 .data([d]);
         symbol.enter().append('g')
             .classed('legendsymbols', true);
-        symbol.style('opacity', opacity);
 
         symbol.selectAll('g.legendpoints')
             .data([d])