Updated scatterChart with transitionDuration property.

examples/scatterChart.html

@@ -68,7 +68,9 @@ nv.addGraph(function() {
                 .showDistY(true)
                 //.height(500)
                 .useVoronoi(true)
-                .color(d3.scale.category10().range());
+                .color(d3.scale.category10().range())
+                .transitionDuration(300)
+                ;
 
   chart.xAxis.tickFormat(d3.format('.02f'));
   chart.yAxis.tickFormat(d3.format('.02f'));
@@ -78,7 +80,6 @@ nv.addGraph(function() {
 
   d3.select('#test1 svg')
       .datum(randomData(4,40))
-    .transition().duration(500)
       .call(chart);
 
   nv.utils.windowResize(chart.update);

examples/scatterPlusLineChart.html

@@ -66,7 +66,7 @@ nv.addGraph(function() {
   chart = nv.models.scatterPlusLineChart()
                 .showDistX(true)
                 .showDistY(true)
-                //.height(500)
+                .transitionDuration(300)
                 .color(d3.scale.category10().range());
 
   chart.xAxis.tickFormat(d3.format('.02f'))
@@ -74,7 +74,6 @@ nv.addGraph(function() {
 
   d3.select('#test1 svg')
       .datum(nv.log(randomData(4,40)))
-    .transition().duration(500)
       .call(chart);
 
   nv.utils.windowResize(chart.update);

src/models/distribution.js

@@ -13,6 +13,7 @@ nv.models.distribution = function() {
     , color = nv.utils.defaultColor()
     , scale = d3.scale.linear()
     , domain
+    , transitionDuration = 250
     ;
 
   //============================================================
@@ -68,7 +69,8 @@ nv.models.distribution = function() {
       dist.enter().append('line')
           .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
-      d3.transition(distWrap.exit().selectAll('line.nv-dist' + axis))
+      distWrap.exit().selectAll('line.nv-dist' + axis)
+          .transition().duration(transitionDuration)
           .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
           .style('stroke-opacity', 0)
@@ -77,7 +79,8 @@ nv.models.distribution = function() {
           .attr('class', function(d,i) { return 'nv-dist' + axis + ' nv-dist' + axis + '-' + i })
           .attr(naxis + '1', 0)
           .attr(naxis + '2', size);
-      d3.transition(dist)
+      dist
+          .transition().duration(transitionDuration)
           .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
 
@@ -139,6 +142,12 @@ nv.models.distribution = function() {
     return chart;
   };
 
+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    return chart;
+  };
+
   //============================================================
 
 

src/models/scatter.js

@@ -38,6 +38,7 @@ nv.models.scatter = function() {
     , singlePoint  = false
     , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
     , useVoronoi   = true
+    , transitionDuration = 250
     ;
 
   //============================================================
@@ -341,14 +342,16 @@ nv.models.scatter = 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();
       groups
           .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
           .classed('hover', function(d) { return d.hover });
-      d3.transition(groups)
+      groups
+          .transition().duration(transitionDuration)
           .style('fill', function(d,i) { return color(d, i) })
           .style('stroke', function(d,i) { return color(d, i) })
           .style('stroke-opacity', 1)
@@ -367,6 +370,7 @@ nv.models.scatter = function() {
             .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
         points.exit().remove();
         groups.exit().selectAll('path.nv-point').transition()
+            .duration(transitionDuration)
             .attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
             .attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
             .remove();
@@ -378,6 +382,7 @@ nv.models.scatter = function() {
             ;
         });
         points.transition()
+            .duration(transitionDuration)
             .attr('cx', function(d,i) { return nv.utils.NaNtoZero(x(getX(d,i))) })
             .attr('cy', function(d,i) { return nv.utils.NaNtoZero(y(getY(d,i))) })
             .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
@@ -398,7 +403,8 @@ nv.models.scatter = function() {
                 .size(function(d,i) { return z(getSize(d,i)) })
             );
         points.exit().remove();
-        d3.transition(groups.exit().selectAll('path.nv-point'))
+        groups.exit().selectAll('path.nv-point')
+            .transition().duration(transitionDuration)
             .attr('transform', function(d,i) {
               return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
             })
@@ -411,6 +417,7 @@ nv.models.scatter = function() {
             ;
         });
         points.transition()
+            .duration(transitionDuration)
             .attr('transform', function(d,i) {
               //nv.log(d,i,getX(d,i), x(getX(d,i)));
               return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
@@ -668,6 +675,12 @@ nv.models.scatter = function() {
     return chart;
   };
 
+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return transitionDuration;
+    transitionDuration = _;
+    return chart;
+  };
+
   //============================================================
 
 

src/models/scatterChart.js

@@ -608,6 +608,16 @@ nv.models.scatterChart = function() {
     return chart;
   };
 
+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return scatter.transitionDuration();
+    scatter.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    distX.transitionDuration(_);
+    distY.transitionDuration(_);
+    return chart;
+  };
+
   //============================================================
 
 

src/models/scatterPlusLineChart.js

@@ -603,6 +603,16 @@ nv.models.scatterPlusLineChart = function() {
     return chart;
   };
 
+  chart.transitionDuration = function(_) {
+    if (!arguments.length) return scatter.transitionDuration();
+    scatter.transitionDuration(_);
+    xAxis.transitionDuration(_);
+    yAxis.transitionDuration(_);
+    distX.transitionDuration(_);
+    distY.transitionDuration(_);
+    return chart;
+  };
+
   //============================================================