Added interaction to stackedArea where a series is isolated when clicked on

src/d3.css

@@ -260,14 +260,25 @@ svg .title {
 */
 
 .d3stackedarea path.area {
-  fill-opacity: .75;
-  stroke-opacity: .75;
+  fill-opacity: .65;
+  stroke-opacity: .65;
   stroke-width: 0.1px;
+
+  transition: all 500ms linear;
+  -moz-transition: all 500ms linear;
+  -webkit-transition: all 500ms linear;
+
+  /*
+  transition-delay: 500ms;
+  -moz-transition-delay: 500ms;
+  -webkit-transition-delay: 500ms;
+  */
+
 }
 
 .d3stackedarea path.area.hover {
-  fill-opacity: 1;
-  stroke-opacity: 1;
+  fill-opacity: .85;
+  stroke-opacity: .85;
 }
 /*
 .d3stackedarea .groups path {

src/models/scatter.js

@@ -14,12 +14,13 @@ nv.models.scatter = function() {
       interactive = true, // If true, plots a voronoi overlay for advanced point interection
       clipEdge = false, // if true, masks lines within x and y scale
       clipVoronoi = true, // if true, masks each point with a circle... can turn off to slightly increase performance
+      clipRadius = function() { return 25 },
       xDomain, yDomain, sizeDomain; // Used to manually set the x and y domain, good to save time if calculation has already been made
 
   var x = d3.scale.linear(),
       y = d3.scale.linear(),
       z = d3.scale.sqrt(), //sqrt because point size is done by area, not radius
-      dispatch = d3.dispatch('pointMouseover', 'pointMouseout'),//TODO: consider renaming to elementMouseove and elementMouseout for consistency
+      dispatch = d3.dispatch('pointClick', 'pointMouseover', 'pointMouseout'),//TODO: consider renaming to elementMouseove and elementMouseout for consistency
       x0, y0, z0,
       timeoutID;
 
@@ -114,7 +115,7 @@ nv.models.scatter = function() {
           var pointClips = wrap.select('#points-clip-' + id).selectAll('circle')
               .data(vertices);
           pointClips.enter().append('circle')
-              .attr('r', 25);
+              .attr('r', clipRadius);
           pointClips.exit().remove();
           pointClips
               .attr('cx', function(d) { return d[0] })
@@ -137,6 +138,18 @@ nv.models.scatter = function() {
         pointPaths.exit().remove();
         pointPaths
             .attr('d', function(d) { return 'M' + d.data.join(',') + 'Z'; })
+            .on('click', function(d) {
+              var series = data[d.series],
+                  point  = series.values[d.point];
+
+              dispatch.pointClick({
+                point: point,
+                series:series,
+                pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                seriesIndex: d.series,
+                pointIndex: d.point
+              });
+            })
             .on('mouseover', function(d) {
               var series = data[d.series],
                   point  = series.values[d.point];

src/models/stackedArea.js

@@ -144,6 +144,9 @@ nv.models.stackedArea = function() {
             .attr('d', function(d,i) { return area(d.values,i) })
 
 
+        scatter.dispatch.on('pointClick.area', function(e) {
+          dispatch.areaClick(e);
+        })
         scatter.dispatch.on('pointMouseover.area', function(e) {
           g.select('.area-' + e.seriesIndex).classed('hover', true);
         });
@@ -229,6 +232,7 @@ nv.models.stackedArea = function() {
   };
 
   chart.dispatch = dispatch;
+  chart.scatter = scatter;
 
 
   scatter.dispatch.on('pointMouseover.tooltip', function(e) {

src/models/stackedAreaWithLegend.js

@@ -66,7 +66,28 @@ nv.models.stackedAreaWithLegend = function() {
       gEnter.append('g').attr('class', 'legendWrap');
       gEnter.append('g').attr('class', 'controlsWrap');
 
+      stacked.dispatch.on('areaClick.test', function(e) {
+        if (data.filter(function(d) { return !d.disabled }).length === 1)
+          data = data.map(function(d) { 
+            d.disabled = false; 
+            if (d.disabled)
+              d.values.map(function(p) { p._y = p.y; p.y = 0; return p }); //TODO: need to use value from getY, not always d.y
+            else
+              d.values.map(function(p) { p.y = p._y || p.y; return p }); // ....
+            return d 
+          });
+        else
+          data = data.map(function(d,i) { 
+            d.disabled = (i != e.seriesIndex); 
+            if (d.disabled)
+              d.values.map(function(p) { p._y = p.y; p.y = 0; return p }); //TODO: need to use value from getY, not always d.y
+            else
+              d.values.map(function(p) { p.y = p._y || p.y; return p }); // ....
+            return d 
+          });
 
+        selection.transition().call(chart);
+      });
       legend.dispatch.on('legendClick', function(d,i) { 
         d.disabled = !d.disabled;