Issue #253 cumulative line re-zero's on click

nv.d3.js

@@ -1721,6 +1721,7 @@ nv.models.cumulativeLineChart = function() {
 
       gEnter.append('g').attr('class', 'nv-x nv-axis');
       gEnter.append('g').attr('class', 'nv-y nv-axis');
+      gEnter.append('g').attr('class', 'nv-background');
       gEnter.append('g').attr('class', 'nv-linesWrap');
       gEnter.append('g').attr('class', 'nv-legendWrap');
       gEnter.append('g').attr('class', 'nv-controlsWrap');
@@ -1775,6 +1776,11 @@ nv.models.cumulativeLineChart = function() {
       //------------------------------------------------------------
       // Main Chart Component(s)
 
+      gEnter.select('.nv-background')
+        .append('rect')
+          .attr('width', availableWidth)
+          .attr('height', availableHeight);
+
       lines
         //.x(function(d) { return d.x })
         .y(function(d) { return d.display.y })
@@ -1838,6 +1844,21 @@ nv.models.cumulativeLineChart = function() {
       // Event Handling/Dispatching (in chart's scope)
       //------------------------------------------------------------
 
+      g.select('.nv-background rect')
+          .on('click', function(e) {
+            index.x = d3.mouse(this)[0];
+            index.i = Math.round(dx.invert(index.x));
+
+            indexLine
+              .data([index]);
+
+            //d.x += d3.event.dx;
+            //d.i = Math.round(dx.invert(d.x));
+
+            //d3.select(this).attr('transform', 'translate(' + dx(d.i) + ',0)');
+            chart.update();
+          });
+
       controls.dispatch.on('legendClick', function(d,i) { 
         d.disabled = !d.disabled;
         rescaleY = !d.disabled;

src/models/cumulativeLineChart.js

@@ -171,6 +171,7 @@ nv.models.cumulativeLineChart = function() {
 
       gEnter.append('g').attr('class', 'nv-x nv-axis');
       gEnter.append('g').attr('class', 'nv-y nv-axis');
+      gEnter.append('g').attr('class', 'nv-background');
       gEnter.append('g').attr('class', 'nv-linesWrap');
       gEnter.append('g').attr('class', 'nv-legendWrap');
       gEnter.append('g').attr('class', 'nv-controlsWrap');
@@ -225,6 +226,11 @@ nv.models.cumulativeLineChart = function() {
       //------------------------------------------------------------
       // Main Chart Component(s)
 
+      gEnter.select('.nv-background')
+        .append('rect')
+          .attr('width', availableWidth)
+          .attr('height', availableHeight);
+
       lines
         //.x(function(d) { return d.x })
         .y(function(d) { return d.display.y })
@@ -288,6 +294,21 @@ nv.models.cumulativeLineChart = function() {
       // Event Handling/Dispatching (in chart's scope)
       //------------------------------------------------------------
 
+      g.select('.nv-background rect')
+          .on('click', function(e) {
+            index.x = d3.mouse(this)[0];
+            index.i = Math.round(dx.invert(index.x));
+
+            indexLine
+              .data([index]);
+
+            //d.x += d3.event.dx;
+            //d.i = Math.round(dx.invert(d.x));
+
+            //d3.select(this).attr('transform', 'translate(' + dx(d.i) + ',0)');
+            chart.update();
+          });
+
       controls.dispatch.on('legendClick', function(d,i) { 
         d.disabled = !d.disabled;
         rescaleY = !d.disabled;

src/nv.d3.css

@@ -101,7 +101,8 @@ svg .title {
 }
 
 .nvd3 .nv-background {
-  fill: none;
+  fill: white;
+  fill-opacity: 0;
   /*
   pointer-events: none;
   */