Working on using the usual data scheme for the stacked charts, fixed css error with tooltip delay, cleaned up some code

examples/lineChart.html

@@ -58,11 +58,13 @@ nv.charts.line()
 
 function sinAndCos() {
   var sin = [],
-      cos = [];
+      cos = [],
+      r1 = Math.random(),
+      r2 = Math.random();
 
   for (var i = 0; i < 100; i++) {
-    sin.push({x: i, voltage: Math.sin(i/10)});
-    cos.push({x: i, voltage: .5 * Math.cos(i/10)});
+    sin.push({x: i, voltage: r2 * Math.sin(i/10)});
+    cos.push({x: i, voltage: r1 * Math.cos(i/10)});
   }
 
   return [

examples/stackedAreaWithLegend.html

@@ -27,6 +27,7 @@ text {
 <script src="../src/models/xaxis.js"></script>
 <script src="../src/models/yaxis.js"></script>
 <script src="../src/models/legend.js"></script>
+<script src="../src/models/line.js"></script>
 <script src="../src/models/stackedArea.js"></script>
 <script src="../src/models/stackedAreaWithLegend.js"></script>
 <script>

src/d3.css

@@ -28,7 +28,7 @@
   -moz-transition: opacity 500ms linear;
   -webkit-transition: opacity 500ms linear;
 
-  transition-delay: 500ms
+  transition-delay: 500ms;
   -moz-transition-delay: 500ms;
   -webkit-transition-delay: 500ms;
 

src/models/line.js

@@ -22,17 +22,20 @@ nv.models.line = function() {
 
   function chart(selection) {
     selection.each(function(data) {
-      var seriesData = data.map(function(d) { return d.values });
+      var seriesData = data.map(function(d) { return d.values }),
+          availableWidth = width - margin.left - margin.right,
+          availableHeight = height - margin.top - margin.bottom;
 
       x0 = x0 || x;
       y0 = y0 || y;
 
+
       //TODO: consider reusing the parent's scales (almost always making duplicates of the same scale)
       x   .domain(xDomain || d3.extent(d3.merge(seriesData), getX ))
-          .range([0, width - margin.left - margin.right]);
+          .range([0, availableWidth]);
 
       y   .domain(yDomain || d3.extent(d3.merge(seriesData), getY ))
-          .range([height - margin.top - margin.bottom, 0]);
+          .range([availableHeight, 0]);
 
 
       var wrap = d3.select(this).selectAll('g.d3line').data([data]);
@@ -50,8 +53,8 @@ nv.models.line = function() {
           .attr('id', 'chart-clip-path-' + id)
         .append('rect');
       wrap.select('#chart-clip-path-' + id + ' rect')
-          .attr('width', width - margin.left - margin.right)
-          .attr('height', height - margin.top - margin.bottom);
+          .attr('width', availableWidth)
+          .attr('height', availableHeight);
 
       gEnter
           .attr('clip-path', 'url(#chart-clip-path-' + id + ')');
@@ -60,7 +63,10 @@ nv.models.line = function() {
 
 
       //TODO: currently doesnt remove if user renders, then turns off interactions... currently must turn off before the first render (will need to fix)
-      if (interactive) {
+      //TODO: have the interactive component update AFTER transitions are complete
+      function interactiveLayer() {
+        if (!interactive) return false;
+
         shiftWrap.append('g').attr('class', 'point-clips');
         shiftWrap.append('g').attr('class', 'point-paths');
 
@@ -97,8 +103,6 @@ nv.models.line = function() {
 
         pointPaths.enter().append('path')
             .attr('class', function(d,i) { return 'path-'+i; })
-            //.style('fill', d3.rgb(230, 230, 230))
-            //.style('stroke', d3.rgb(200, 200, 200))
             .style('fill-opacity', 0);
 
         pointPaths.exit().remove();
@@ -156,7 +160,9 @@ nv.models.line = function() {
           .style('stroke', function(d,i){ return color[i % 20] })
       d3.transition(lines)
           .style('stroke-opacity', 1)
-          .style('fill-opacity', .5);
+          .style('fill-opacity', .5)
+          .each('end', function(d,i) { if (!i) interactiveLayer()  }); //trying to call this after transitions are over.. not sure if the setTimeout is helpful, or dangerous
+          //.each('end', function(d,i) { if (!i) setTimeout(interactiveLayer,0)  }); //trying to call this after transitions are over.. not sure if the setTimeout is helpful, or dangerous
 
 
       var paths = lines.selectAll('path')

src/models/lineWithFocus.js

@@ -202,6 +202,7 @@ nv.models.lineWithFocus = function() {
         selection.transition().call(chart);
       });
 
+/*
       legend.dispatch.on('legendMouseover', function(d, i) {
         d.hover = true;
         selection.transition().call(chart)
@@ -210,7 +211,7 @@ nv.models.lineWithFocus = function() {
         d.hover = false;
         selection.transition().call(chart)
       });
-
+*/
 
       focus.dispatch.on('pointMouseover.tooltip', function(e) {
         dispatch.tooltipShow({

src/models/lineWithLegend.js

@@ -20,20 +20,22 @@ nv.models.lineWithLegend = function() {
   function chart(selection) {
     selection.each(function(data) {
       var width = getWidth(),
-          height = getHeight();
+          height = getHeight(),
+          availableWidth = width - margin.left - margin.right,
+          availableHeight = height - margin.top - margin.bottom;
 
       var series = data.filter(function(d) { return !d.disabled })
             .map(function(d) { return d.values });
 
       x   .domain(d3.extent(d3.merge(series), getX ))
-          .range([0, width - margin.left - margin.right]);
+          .range([0, availableWidth]);
 
       y   .domain(d3.extent(d3.merge(series), getY ))
-          .range([height - margin.top - margin.bottom, 0]);
+          .range([availableHeight, 0]);
 
       lines
-        .width(width - margin.left - margin.right)
-        .height(height - margin.top - margin.bottom)
+        .width(availableWidth)
+        .height(availableHeight)
         .color(data.map(function(d,i) {
           return d.color || color[i % 10];
         }).filter(function(d,i) { return !data[i].disabled }))
@@ -62,6 +64,8 @@ nv.models.lineWithLegend = function() {
         selection.transition().call(chart);
       });
 
+/*
+      //
       legend.dispatch.on('legendMouseover', function(d, i) {
         d.hover = true;
         selection.transition().call(chart)
@@ -71,6 +75,7 @@ nv.models.lineWithLegend = function() {
         d.hover = false;
         selection.transition().call(chart)
       });
+*/
 
       lines.dispatch.on('pointMouseover.tooltip', function(e) {
         dispatch.tooltipShow({
@@ -91,14 +96,14 @@ nv.models.lineWithLegend = function() {
       margin.top = legend.height();
 
       var g = wrap.select('g')
-          .attr('transform', 'translate(' + margin.left + ',' + legend.height() + ')');
+          .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 
 
       legend.width(width/2 - margin.right);
 
       g.select('.legendWrap')
           .datum(data)
-          .attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-legend.height()) +')')
+          .attr('transform', 'translate(' + (width/2 - margin.left) + ',' + (-margin.top) +')')
           .call(legend);
 
 
@@ -113,7 +118,7 @@ nv.models.lineWithLegend = function() {
         .domain(x.domain())
         .range(x.range())
         .ticks( width / 100 )
-        .tickSize(-(height - margin.top - margin.bottom), 0);
+        .tickSize(-availableHeight, 0);
 
       g.select('.x.axis')
           .attr('transform', 'translate(0,' + y.range()[0] + ')');
@@ -124,7 +129,7 @@ nv.models.lineWithLegend = function() {
         .domain(y.domain())
         .range(y.range())
         .ticks( height / 36 )
-        .tickSize(-(width - margin.right - margin.left), 0);
+        .tickSize(-availableWidth, 0);
 
       d3.transition(g.select('.y.axis'))
           .call(yAxis);

src/models/scatter.js

@@ -19,7 +19,9 @@ nv.models.scatter = function() {
 
   function chart(selection) {
     selection.each(function(data) {
-      var seriesData = data.map(function(d) { return d.values });
+      var seriesData = data.map(function(d) { return d.values }),
+          availableWidth = width - margin.left - margin.right,
+          availableHeight = height - margin.top - margin.bottom;
 
       x0 = x0 || x;
       y0 = y0 || y;
@@ -40,10 +42,10 @@ nv.models.scatter = function() {
 
       //TODO: figure out the best way to deal with scales with equal MIN and MAX
       x   .domain(d3.extent(d3.merge(seriesData).map( getX ).concat(forceX) ))
-          .range([0, width - margin.left - margin.right]);
+          .range([0, availableWidth]);
 
       y   .domain(d3.extent(d3.merge(seriesData).map( getY ).concat(forceY) ))
-          .range([height - margin.top - margin.bottom, 0]);
+          .range([availableHeight, 0]);
 
       z   .domain(d3.extent(d3.merge(seriesData), getSize ))
           .range([2, 10]);
@@ -51,7 +53,8 @@ nv.models.scatter = function() {
 
       var vertices = d3.merge(data.map(function(group, groupIndex) {
           return group.values.map(function(point, pointIndex) {
-            return [x(getX(point)), y(getY(point)), groupIndex, pointIndex]; //inject series and point index for reference into voronoi
+            //return [x(getX(point)), y(getY(point)), groupIndex, pointIndex]; //inject series and point index for reference into voronoi
+            return [x(getX(point)) * (Math.random() / 1e12 + 1)  , y(getY(point)) * (Math.random() / 1e12 + 1), groupIndex, pointIndex]; //temp hack to add noise untill I think of a better way so there are no duplicates
           })
         })
       );
@@ -76,8 +79,8 @@ nv.models.scatter = function() {
       wrap.select('.voronoi-clip rect')
           .attr('x', -10)
           .attr('y', -10)
-          .attr('width', width - margin.left - margin.right + 20)
-          .attr('height', height - margin.top - margin.bottom + 20);
+          .attr('width', availableWidth + 20)
+          .attr('height', availableHeight + 20);
       wrap.select('.point-paths')
           .attr('clip-path', 'url(#voronoi-clip-path-' + id + ')');
 
@@ -98,7 +101,6 @@ nv.models.scatter = function() {
       var voronoi = d3.geom.voronoi(vertices).map(function(d, i) { return { 'data': d, 'series': vertices[i][2], 'point': vertices[i][3] } });
 
 
-      //TODO: Need to deal with duplicates, maybe add small amount of noise to all
       var pointPaths = wrap.select('.point-paths').selectAll('path')
           .data(voronoi);
       pointPaths.enter().append('path')

src/models/stackedArea.js

@@ -4,9 +4,12 @@ nv.models.stackedArea = function() {
       width = 960,
       height = 500,
       color = d3.scale.category10().range(),
+      getX = function(d) { return d.x },
+      getY = function(d) { return d.y },
       style = 'stack',
       offset = 'zero',
-      order = 'default';
+      order = 'default',
+      xDomain, yDomain;
 
 /************************************
  * offset:
@@ -20,29 +23,34 @@ nv.models.stackedArea = function() {
  *   'default' (input order)
  ************************************/
 
-  var lines = nv.models.line();
+  var lines = nv.models.line(),
+      x = d3.scale.linear(),
+      y = d3.scale.linear();
 
   function chart(selection) {
     selection.each(function(data) {
-
         // Need to leave data alone to switch between stacked, stream, and expanded
-        var dataCopy = JSON.parse(JSON.stringify(data));
+        var dataCopy = JSON.parse(JSON.stringify(data)),
+            seriesData = dataCopy.map(function(d) { return d.values }),
+            availableWidth = width - margin.left - margin.right,
+            availableHeight = height - margin.top - margin.bottom;
 
 
         //compute the data based on offset and order (calc's y0 for every point)
-        dataCopy =  d3.layout.stack().offset(offset).order(order).values(function(d){ return d.values })(dataCopy);
+        dataCopy = d3.layout.stack().offset(offset).order(order).values(function(d){ return d.values })(dataCopy);
 
-        var mx = dataCopy[0].values.length - 1, // assumes that all layers have same # of samples & that there is at least one layer
-            my = d3.max(dataCopy, function(d) {
-                return d3.max(d.values, function(d) {
-                    return d.y0 + d.y;
-                });
-            });
+        x   .domain(xDomain || d3.extent(d3.merge(seriesData), getX))
+            .range([0, availableWidth]);
+
+        y   .domain(yDomain || [0, d3.max(dataCopy, function(d) { return d3.max(d.values, function(d) { return d.y0 + d.y }) }) ])
+            .range([availableHeight, 0]);
 
 
         lines
-          .width(width - margin.left - margin.right)
-          .height(height - margin.top - margin.bottom)
+          .width(availableWidth)
+          .height(availableHeight)
+          .xDomain(x.domain())
+          .yDomain(y.domain())
           .y(function(d) { return d.y + d.y0 })
           .color(data.map(function(d,i) {
             return d.color || color[i % 10];
@@ -66,23 +74,19 @@ nv.models.stackedArea = function() {
 
         d3.transition(linesWrap).call(lines);
 
-
-        // Update the stacked graph
-        var availableWidth = width - margin.left - margin.right,
-            availableHeight = height - margin.top - margin.bottom;
-
         var area = d3.svg.area()
-            .x(function(d) { return d.x * availableWidth / mx; })
-            .y0(function(d) { return availableHeight - d.y0 * availableHeight / my; })
-            .y1(function(d) { return availableHeight - (d.y + d.y0) * availableHeight / my; });
+            .x(function(d) { return x(getX(d)) })
+            .y0(function(d) { return y(d.y0) })
+            .y1(function(d) { return y(d.y + d.y0) });
 
         var zeroArea = d3.svg.area()
-            .x(function(d) { return d.x * availableWidth / mx; })
-            .y0(function(d) { return availableHeight - d.y0 * availableHeight / my; })
-            .y1(function(d) { return availableHeight - d.y0 * availableHeight / my; })
+            .x(function(d) { return x(getX(d)) })
+            .y0(function(d) { return y(d.y0) })
+            .y1(function(d) { return y(d.y0) });
+
 
         var path = g.select('.areaWrap').selectAll('path.area')
-          .data(function(d) { return d });
+            .data(function(d) { return d });
         path.enter().append('path').attr('class', 'area');
         d3.transition(path.exit())
             .attr('d', function(d,i) { return zeroArea(d.values,i) })