added areaMouseover, areaMouseout, and areaClick to stackedArea chart

src/d3.css

@@ -264,6 +264,11 @@ svg .title {
   stroke-opacity: .75;
   stroke-width: 0.1px;
 }
+
+.d3stackedarea path.area.hover {
+  fill-opacity: 1;
+  stroke-opacity: 1;
+}
 /*
 .d3stackedarea .groups path {
   stroke-opacity: 0;

src/models/line.js

@@ -108,24 +108,6 @@ nv.models.line = function() {
             .y(function(d,i) { return y(getY(d,i)) })
           );
 
-/*
-      var points = groups.selectAll('circle.point')
-          .data(function(d) { return d.values });
-      points.enter().append('circle')
-          .attr('cx', function(d,i) { return x0(getX(d,i)) })
-          .attr('cy', function(d,i) { return y0(getY(d,i)) });
-      d3.transition(groups.exit().selectAll('circle.point'))
-          .attr('cx', function(d,i) { return x(getX(d,i)) })
-          .attr('cy', function(d,i) { return y(getY(d,i)) })
-          .remove();
-      d3.transition(points)
-          .attr('class', function(d,i) { return 'point point-' + i })
-          .attr('cx', function(d,i) { return x(getX(d,i)) })
-          .attr('cy', function(d,i) { return y(getY(d,i)) })
-          .attr('r', getSize);
-
-*/
-
 
       scatter
         .size(getSize)

src/models/scatter.js

@@ -11,8 +11,6 @@ nv.models.scatter = function() {
       forceX = [], // List of numbers to Force into the X scale (ie. 0, or a max / min, etc.)
       forceY = [], // List of numbers to Force into the Y scale 
       forceSize = [], // List of numbers to Force into the Size scale 
-      showDistX = false,
-      showDistY = false,
       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
@@ -71,7 +69,6 @@ nv.models.scatter = function() {
       var gEnter = wrapEnter.append('g');
 
       gEnter.append('g').attr('class', 'groups');
-      //gEnter.append('g').attr('class', 'distribution');
 
       wrap.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
@@ -164,27 +161,11 @@ nv.models.scatter = function() {
         dispatch.on('pointMouseover.point', function(d) {
             wrap.select('.series-' + d.seriesIndex + ' .point-' + d.pointIndex)
                 .classed('hover', true);
-            /*
-            if (showDistX)
-              wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex)
-                  .attr('y1', d.pos[1] - margin.top);
-            if (showDistY) 
-              wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex)
-                  .attr('x1', d.pos[0] - margin.left);
-            */
         });
 
         dispatch.on('pointMouseout.point', function(d) {
             wrap.select('.series-' + d.seriesIndex + ' circle.point-' + d.pointIndex)
                 .classed('hover', false);
-            /*
-            if (showDistX)
-              wrap.select('.series-' + d.seriesIndex + ' .distX-' + d.pointIndex)
-                  .attr('y1', y.range()[0]);
-            if (showDistY) 
-              wrap.select('.series-' + d.seriesIndex + ' .distY-' + d.pointIndex)
-                  .attr('x1', x.range()[0]);
-            */
         });
 
       }
@@ -230,48 +211,6 @@ nv.models.scatter = function() {
           .attr('r', function(d,i) { return z(getSize(d,i)) });
 
 
-      /*
-      if (showDistX) {
-        var distX = groups.selectAll('line.distX')
-            .data(function(d) { return d.values })
-        distX.enter().append('line')
-            .attr('x1', function(d,i) { return x0(getX(d,i)) })
-            .attr('x2', function(d,i) { return x0(getX(d,i)) })
-        //d3.transition(distX.exit())
-        d3.transition(groups.exit().selectAll('line.distX'))
-            .attr('x1', function(d,i) { return x(getX(d,i)) })
-            .attr('x2', function(d,i) { return x(getX(d,i)) })
-            .remove();
-        distX
-            .attr('class', function(d,i) { return 'distX distX-' + i })
-            .attr('y1', y.range()[0])
-            .attr('y2', y.range()[0] + 8);
-        d3.transition(distX)
-            .attr('x1', function(d,i) { return x(getX(d,i)) })
-            .attr('x2', function(d,i) { return x(getX(d,i)) })
-      }
-
-      if (showDistY) {
-        var distY = groups.selectAll('line.distY')
-            .data(function(d) { return d.values })
-        distY.enter().append('line')
-            .attr('y1', function(d,i) { return y0(getY(d,i)) })
-            .attr('y2', function(d,i) { return y0(getY(d,i)) });
-        //d3.transition(distY.exit())
-        d3.transition(groups.exit().selectAll('line.distY'))
-            .attr('y1', function(d,i) { return y(getY(d,i)) })
-            .attr('y2', function(d,i) { return y(getY(d,i)) })
-            .remove();
-        distY
-            .attr('class', function(d,i) { return 'distY distY-' + i })
-            .attr('x1', x.range()[0])
-            .attr('x2', x.range()[0] - 8)
-        d3.transition(distY)
-            .attr('y1', function(d,i) { return y(getY(d,i)) })
-            .attr('y2', function(d,i) { return y(getY(d,i)) });
-      }
-      */
-
 
       clearTimeout(timeoutID);
       timeoutID = setTimeout(updateInteractiveLayer, 750);
@@ -367,18 +306,6 @@ nv.models.scatter = function() {
     return chart;
   };
 
-  chart.showDistX = function(_) {
-    if (!arguments.length) return showDistX;
-    showDistX = _;
-    return chart;
-  };
-
-  chart.showDistY = function(_) {
-    if (!arguments.length) return showDistY;
-    showDistY = _;
-    return chart;
-  };
-
   chart.clipEdge = function(_) {
     if (!arguments.length) return clipEdge;
     clipEdge = _;

src/models/scatterWithLegend.js

@@ -7,6 +7,8 @@ nv.models.scatterWithLegend = function() {
       yAxisRender = true,
       xAxisLabelText = false,
       yAxisLabelText = false,
+      showDistX = false,
+      showDistY = false,
       color = d3.scale.category10().range(),
       forceX = [],
       forceY = [],
@@ -237,6 +239,18 @@ nv.models.scatterWithLegend = function() {
     return chart;
   };
 
+  chart.showDistX = function(_) {
+    if (!arguments.length) return showDistX;
+    showDistX = _;
+    return chart;
+  };
+
+  chart.showDistY = function(_) {
+    if (!arguments.length) return showDistY;
+    showDistY = _;
+    return chart;
+  };
+
 
   return chart;
 }

src/models/stackedArea.js

@@ -10,7 +10,7 @@ nv.models.stackedArea = function() {
       offset = 'zero',
       order = 'default',
       xDomain, yDomain,
-      dispatch =  d3.dispatch('tooltipShow', 'tooltipHide');
+      dispatch =  d3.dispatch('tooltipShow', 'tooltipHide', 'areaClick', 'areaMouseover', 'areaMouseout' );
 
 /************************************
  * offset:
@@ -24,7 +24,7 @@ nv.models.stackedArea = function() {
  *   'default' (input order)
  ************************************/
 
-  var scatter= nv.models.scatter().size(2), //TODO: this really should just be a scatterplot overlayed, not a line
+  var scatter= nv.models.scatter().size(2),
       x = d3.scale.linear(),
       y = d3.scale.linear();
 
@@ -60,13 +60,12 @@ nv.models.stackedArea = function() {
 
 
         scatter
-          //.interactive(false) //if we were to turn off interactive, the whole line chart should be removed
           .width(availableWidth)
           .height(availableHeight)
           .xDomain(x.domain())
           .yDomain(y.domain())
           .x(getX)
-          .y(function(d) { return d.y + d.y0 })
+          .y(function(d) { return d.y + d.y0 }) // TODO: allow for getY to be other than d.y
           .color(data.map(function(d,i) {
             return d.color || color[i % 10];
           }).filter(function(d,i) { return !data[i].disabled }));
@@ -101,7 +100,40 @@ nv.models.stackedArea = function() {
 
         var path = g.select('.areaWrap').selectAll('path.area')
             .data(function(d) { return d });
-        path.enter().append('path').attr('class', 'area');
+        path.enter().append('path').attr('class', function(d,i) { return 'area area-' + i })
+            .on('mouseover', function(d,i) {
+              d3.select(this).classed('hover', true);
+              dispatch.areaMouseover({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
+            .on('mouseout', function(d,i) {
+              d3.select(this).classed('hover', false);
+              dispatch.areaMouseout({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
+            .on('click', function(d,i) {
+              d3.select(this).classed('hover', false);
+              dispatch.areaClick({
+                point: d,
+                series: d.key,
+                //pos: [x(getX(point, d.point)) + margin.left, y(getY(point, d.point)) + margin.top],
+                pos: [d3.event.pageX, d3.event.pageY],
+                seriesIndex: i
+                //pointIndex: d.point
+              });
+            })
         d3.transition(path.exit())
             .attr('d', function(d,i) { return zeroArea(d.values,i) })
             .remove();
@@ -111,8 +143,17 @@ nv.models.stackedArea = function() {
         d3.transition(path)
             .attr('d', function(d,i) { return area(d.values,i) })
 
+
+        scatter.dispatch.on('pointMouseover.area', function(e) {
+          g.select('.area-' + e.seriesIndex).classed('hover', true);
+        });
+        scatter.dispatch.on('pointMouseout.area', function(e) {
+          g.select('.area-' + e.seriesIndex).classed('hover', false);
+        });
+
     });
 
+
     return chart;
   }
 
@@ -189,6 +230,7 @@ nv.models.stackedArea = function() {
 
   chart.dispatch = dispatch;
 
+
   scatter.dispatch.on('pointMouseover.tooltip', function(e) {
         dispatch.tooltipShow({
             point: e.point,