Removed transitionDuration from line.js and axis.js, and modified

lineChart.js to pass transition in via inheritance.

examples/lineChart.html

@@ -19,7 +19,7 @@ svg {
 
 #chart1 svg {
   height: 500px;
-  min-width: 1200px;
+  min-width: 200px;
   min-height: 100px;
 /*
   margin: 50px;
@@ -60,7 +60,7 @@ nv.addGraph(function() {
   chart
     .margin({left: 100, bottom: 100})
     .x(function(d,i) { return i })
-    .transitionDuration(250)
+    .transitionDuration(300)
     ;
 
   // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
@@ -75,7 +75,6 @@ nv.addGraph(function() {
   chart.showXAxis(true);
 
   d3.select('#chart1 svg')
-    //.datum([]) //for testing noData
     .datum(sinAndCos())
     .call(chart);
 

src/models/axis.js

@@ -19,7 +19,6 @@ nv.models.axis = function() {
     , staggerLabels = false
     , isOrdinal = false
     , ticks = null
-    , transitionDuration = 250
     ;
 
   axis
@@ -65,7 +64,7 @@ nv.models.axis = function() {
       //TODO: consider calculating width/height based on whether or not label is added, for reference in charts using this component
 
 
-      g.transition().duration(transitionDuration).call(axis);
+      g.transition().call(axis);
 
       scale0 = scale0 || axis.scale();
 
@@ -102,7 +101,7 @@ nv.models.axis = function() {
                   var v = fmt(d);
                   return ('' + v).match('NaN') ? '' : v;
                 });
-            axisMaxMin.transition().duration(transitionDuration)
+            axisMaxMin.transition()
                 .attr('transform', function(d,i) {
                   return 'translate(' + scale.range()[i] + ',0)'
                 });
@@ -152,7 +151,7 @@ nv.models.axis = function() {
                   var v = fmt(d);
                   return ('' + v).match('NaN') ? '' : v;
                 });
-            axisMaxMin.transition().duration(transitionDuration)
+            axisMaxMin.transition()
                 .attr('transform', function(d,i) {
                   //return 'translate(' + scale.range()[i] + ',0)'
                   //return 'translate(' + scale(d) + ',0)'
@@ -190,7 +189,7 @@ nv.models.axis = function() {
                   var v = fmt(d);
                   return ('' + v).match('NaN') ? '' : v;
                 });
-            axisMaxMin.transition().duration(transitionDuration)
+            axisMaxMin.transition()
                 .attr('transform', function(d,i) {
                   return 'translate(0,' + scale.range()[i] + ')'
                 })
@@ -232,7 +231,7 @@ nv.models.axis = function() {
                   var v = fmt(d);
                   return ('' + v).match('NaN') ? '' : v;
                 });
-            axisMaxMin.transition().duration(transitionDuration)
+            axisMaxMin.transition()
                 .attr('transform', function(d,i) {
                   return 'translate(0,' + scale.range()[i] + ')'
                 })
@@ -390,13 +389,6 @@ nv.models.axis = function() {
     return chart;
   };
 
-  chart.transitionDuration = function(_) {
-      if (!arguments.length) return transitionDuration;
-      transitionDuration = _;
-      return chart;
-  };
-
-
   //============================================================
 
 

src/models/line.js

@@ -20,7 +20,6 @@ nv.models.line = function() {
     , x //can be accessed via chart.xScale()
     , y //can be accessed via chart.yScale()
     , interpolate = "linear" // controls the line interpolation
-    , transitionDuration = 250  //override the transition duration
     ;
 
   scatter
@@ -110,7 +109,7 @@ nv.models.line = function() {
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6);
       groups.exit()
-          .transition().duration(transitionDuration)
+          .transition()
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6)
           .remove();
@@ -120,7 +119,7 @@ nv.models.line = function() {
           .style('fill', function(d,i){ return color(d, i) })
           .style('stroke', function(d,i){ return color(d, i)});
       groups
-          .transition().duration(transitionDuration)
+          .transition()
           .style('stroke-opacity', 1)
           .style('fill-opacity', .5);
 
@@ -141,19 +140,10 @@ nv.models.line = function() {
                 .apply(this, [d.values])
           });
       groups.exit().selectAll('path.nv-area')
-          .transition().duration(transitionDuration)
-          .attr('d', function(d) {
-            return d3.svg.area()
-                .interpolate(interpolate)
-                .defined(defined)
-                .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
-                .y0(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
-                .y1(function(d,i) { return y( y.domain()[0] <= 0 ? y.domain()[1] >= 0 ? 0 : y.domain()[1] : y.domain()[0] ) })
-                //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
-                .apply(this, [d.values])
-          });
+           .remove();
+           
       areaPaths
-          .transition().duration(transitionDuration)
+          .transition()
           .attr('d', function(d) {
             return d3.svg.area()
                 .interpolate(interpolate)
@@ -179,7 +169,7 @@ nv.models.line = function() {
               .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
           );
       groups.exit().selectAll('path.nv-line')
-          .transition().duration(transitionDuration)
+          .transition()
           .attr('d',
             d3.svg.line()
               .interpolate(interpolate)
@@ -188,7 +178,7 @@ nv.models.line = function() {
               .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
           );
       linePaths
-          .transition().duration(transitionDuration)
+          .transition()
           .attr('d',
             d3.svg.line()
               .interpolate(interpolate)
@@ -285,12 +275,6 @@ nv.models.line = function() {
     return chart;
   };
 
-  chart.transitionDuration = function(_) {
-      if (!arguments.length) return transitionDuration;
-      transitionDuration = _;
-      return chart;
-  };
-
   //============================================================
 
 

src/models/lineChart.js

@@ -32,6 +32,7 @@ nv.models.lineChart = function() {
     , defaultState = null
     , noData = 'No Data Available.'
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
+    , transitionDuration = 250
     ;
 
   xAxis
@@ -73,7 +74,7 @@ nv.models.lineChart = function() {
                              - margin.top - margin.bottom;
 
 
-      chart.update = function() { container.transition().call(chart) };
+      chart.update = function() { container.transition().duration(transitionDuration).call(chart) };
       chart.container = this;
 
       //set state.disabled
@@ -196,7 +197,7 @@ nv.models.lineChart = function() {
       var linesWrap = g.select('.nv-linesWrap')
           .datum(data.filter(function(d) { return !d.disabled }))
 
-      d3.transition(linesWrap).call(lines);
+      linesWrap.transition().call(lines);
 
       //------------------------------------------------------------
 
@@ -441,10 +442,8 @@ nv.models.lineChart = function() {
   };
 
   chart.transitionDuration = function(_) {
-    if (!arguments.length) return lines.transitionDuration();
-    lines.transitionDuration(_);
-    xAxis.transitionDuration(_);
-    yAxis.transitionDuration(_);
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
     return chart;
   };