Adding transitionDuration property to line.js

examples/lineChart.html

@@ -60,6 +60,7 @@ nv.addGraph(function() {
   chart
     .margin({left: 100, bottom: 100})
     .x(function(d,i) { return i })
+    ;
 
   // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
   chart.xAxis
@@ -75,7 +76,6 @@ nv.addGraph(function() {
   d3.select('#chart1 svg')
     //.datum([]) //for testing noData
     .datum(sinAndCos())
-    .transition().duration(500)
     .call(chart);
 
   //TODO: Figure out a good way to do this automatically

src/core.js

@@ -2,7 +2,7 @@
 var nv = window.nv || {};
 
 
-nv.version = '1.1.2b';
+nv.version = '1.1.3b';
 nv.dev = true //set false when in production
 
 window.nv = nv;

src/models/line.js

@@ -20,6 +20,7 @@ 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
@@ -84,7 +85,7 @@ nv.models.line = function() {
       var scatterWrap = wrap.select('.nv-scatterWrap');
           //.datum(data); // Data automatically trickles down from the wrap
 
-      d3.transition(scatterWrap).call(scatter);
+      scatterWrap.transition().call(scatter);
 
 
 
@@ -108,7 +109,8 @@ nv.models.line = function() {
       groups.enter().append('g')
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6);
-      d3.transition(groups.exit())
+      groups.exit()
+          .transition().duration(transitionDuration)
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6)
           .remove();
@@ -117,7 +119,8 @@ nv.models.line = function() {
           .classed('hover', function(d) { return d.hover })
           .style('fill', function(d,i){ return color(d, i) })
           .style('stroke', function(d,i){ return color(d, i)});
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
           .style('stroke-opacity', 1)
           .style('fill-opacity', .5);
 
@@ -137,7 +140,8 @@ nv.models.line = function() {
                 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                 .apply(this, [d.values])
           });
-      d3.transition(groups.exit().selectAll('path.nv-area'))
+      groups.exit().selectAll('path.nv-area')
+          .transition().duration(transitionDuration)
           .attr('d', function(d) {
             return d3.svg.area()
                 .interpolate(interpolate)
@@ -148,7 +152,8 @@ nv.models.line = function() {
                 //.y1(function(d,i) { return y0(0) }) //assuming 0 is within y domain.. may need to tweak this
                 .apply(this, [d.values])
           });
-      d3.transition(areaPaths)
+      areaPaths
+          .transition().duration(transitionDuration)
           .attr('d', function(d) {
             return d3.svg.area()
                 .interpolate(interpolate)
@@ -173,7 +178,8 @@ nv.models.line = function() {
               .x(function(d,i) { return nv.utils.NaNtoZero(x0(getX(d,i))) })
               .y(function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
           );
-      d3.transition(groups.exit().selectAll('path.nv-line'))
+      groups.exit().selectAll('path.nv-line')
+          .transition().duration(transitionDuration)
           .attr('d',
             d3.svg.line()
               .interpolate(interpolate)
@@ -181,7 +187,8 @@ nv.models.line = function() {
               .x(function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
               .y(function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
           );
-      d3.transition(linePaths)
+      linePaths
+          .transition().duration(transitionDuration)
           .attr('d',
             d3.svg.line()
               .interpolate(interpolate)
@@ -278,6 +285,12 @@ nv.models.line = function() {
     return chart;
   };
 
+  chart.transitionDuration = function(_) {
+      if (!arguments.length) return transitionDuration;
+      transitionDuration = _;
+      return chart;
+  };
+
   //============================================================
 
 

src/models/lineChart.js

@@ -211,7 +211,8 @@ nv.models.lineChart = function() {
 
         g.select('.nv-x.nv-axis')
             .attr('transform', 'translate(0,' + y.range()[0] + ')');
-        d3.transition(g.select('.nv-x.nv-axis'))
+        g.select('.nv-x.nv-axis')
+            .transition()
             .call(xAxis);
       }
 
@@ -221,7 +222,8 @@ nv.models.lineChart = function() {
           .ticks( availableHeight / 36 )
           .tickSize( -availableWidth, 0);
 
-        d3.transition(g.select('.nv-y.nv-axis'))
+        g.select('.nv-y.nv-axis')
+            .transition()
             .call(yAxis);
       }
       //------------------------------------------------------------
@@ -341,7 +343,8 @@ nv.models.lineChart = function() {
   chart.yAxis = yAxis;
   chart.interactiveLayer = interactiveLayer;
 
-  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange', 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate');
+  d3.rebind(chart, lines, 'defined', 'isArea', 'x', 'y', 'size', 'xScale', 'yScale', 'xDomain', 'yDomain', 'xRange', 'yRange'
+    , 'forceX', 'forceY', 'interactive', 'clipEdge', 'clipVoronoi', 'useVoronoi','id', 'interpolate','transitionDuration');
 
   chart.margin = function(_) {
     if (!arguments.length) return margin;