One of my projects is to overhaul the code for nv.models.legend.

Right now, we have duplicated code in all of our charts
for handling legendClick and legendDblClick. It turns out we
can handle this all in legend.js, and reduce the amount of
code in each chart model.

So far, I've converted lineChart.js to this new format.

src/models/legend.js

@@ -11,7 +11,8 @@ nv.models.legend = function() {
     , color = nv.utils.defaultColor()
     , align = true
     , rightAlign = true
-    , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout')
+    , updateState = true   //If true, legend will update data.disabled and trigger a 'stateChange' dispatch.
+    , dispatch = d3.dispatch('legendClick', 'legendDblclick', 'legendMouseover', 'legendMouseout', 'stateChange')
     ;
 
   //============================================================
@@ -46,9 +47,31 @@ nv.models.legend = function() {
           })
           .on('click', function(d,i) {
             dispatch.legendClick(d,i);
+            if (updateState) {
+               d.disabled = !d.disabled;
+               if (data.every(function(series) { return series.disabled})) {
+                   //the default behavior of NVD3 legends is, if every single series
+                   // is disabled, turn all series' back on.
+                   data.forEach(function(series) { series.disabled = false});
+               }
+               dispatch.stateChange({
+                  disabled: data.map(function(d) { return !!d.disabled })
+               });
+            }
           })
           .on('dblclick', function(d,i) {
             dispatch.legendDblclick(d,i);
+            if (updateState) {
+                //the default behavior of NVD3 legends, when double clicking one,
+                // is to set all other series' to false, and make the double clicked series enabled.
+                data.forEach(function(series) {
+                   series.disabled = true;
+                });
+                d.disabled = false; 
+                dispatch.stateChange({
+                    disabled: data.map(function(d) { return !!d.disabled })
+                });
+            }
           });
       seriesEnter.append('circle')
           .style('stroke-width', 2)
@@ -84,8 +107,6 @@ nv.models.legend = function() {
               seriesWidths.push(nodeTextLength + 28); // 28 is ~ the width of the circle plus some padding
             });
 
-        //nv.log('Series Widths: ', JSON.stringify(seriesWidths));
-
         var seriesPerRow = 0;
         var legendWidth = 0;
         var columnWidths = [];
@@ -110,7 +131,6 @@ nv.models.legend = function() {
                           return prev + cur;
                         });
         }
-        //console.log(columnWidths, legendWidth, seriesPerRow);
 
         var xPositions = [];
         for (var i = 0, curX = 0; i < seriesPerRow; i++) {
@@ -219,6 +239,12 @@ nv.models.legend = function() {
     return chart;
   };
 
+  chart.updateState = function(_) {
+    if (!arguments.length) return updateState;
+    updateState = _;
+    return chart;
+  };
+
   //============================================================
 
 

src/models/lineChart.js

@@ -12,7 +12,6 @@ nv.models.lineChart = function() {
     , interactiveLayer = nv.interactiveGuideline()
     ;
 
-//set margin.right to 23 to fit dates on the x-axis within the chart
   var margin = {top: 30, right: 20, bottom: 50, left: 60}
     , color = nv.utils.defaultColor()
     , width = null
@@ -80,6 +79,7 @@ nv.models.lineChart = function() {
       //set state.disabled
       state.disabled = data.map(function(d) { return !!d.disabled });
 
+    
       if (!defaultState) {
         var key;
         defaultState = {};
@@ -231,38 +231,11 @@ nv.models.lineChart = function() {
       // Event Handling/Dispatching (in chart's scope)
       //------------------------------------------------------------
 
-      legend.dispatch.on('legendClick', function(d,i) { 
-        d.disabled = !d.disabled;
-
-        if (!data.filter(function(d) { return !d.disabled }).length) {
-          data.map(function(d) {
-            d.disabled = false;
-            wrap.selectAll('.nv-series').classed('disabled', false);
-            return d;
-          });
-        }
-
-        state.disabled = data.map(function(d) { return !!d.disabled });
-        dispatch.stateChange(state);
-
-        // container.transition().call(chart);
-        chart.update();
-      });
-
-      legend.dispatch.on('legendDblclick', function(d) {
-          //Double clicking should always enable current series, and disabled all others.
-          data.forEach(function(d) {
-             d.disabled = true;
-          });
-          d.disabled = false;  
-
-          state.disabled = data.map(function(d) { return !!d.disabled });
+      legend.dispatch.on('stateChange', function(state) {
           dispatch.stateChange(state);
           chart.update();
       });
 
-      
-
       interactiveLayer.dispatch.on('elementMousemove', function(e) {
           lines.clearHighlights();
           var singlePoint, pointIndex, pointXLocation, allData = [];