Fixing scatterChart transitionDuration property.

README.md

@@ -20,6 +20,8 @@ to the containing chart DIV.
 * Issue #216: Exposing xRange and yRange overrides for all charts.
 * Issue #168: Adding legend.radioButtonMode(). When set to true, legend click behavior will match those of radio buttons.
 * Line stroke-width has been reduced to 1.5px, from 2.5px.
+* Multibar charts no longer have a transition delay set for each bar. 
+* Added Multibar chart property "groupSpacing".
 
 
 ## Overview

examples/scatterChart.html

@@ -66,7 +66,6 @@ nv.addGraph(function() {
   chart = nv.models.scatterChart()
                 .showDistX(true)
                 .showDistY(true)
-                //.height(500)
                 .useVoronoi(true)
                 .color(d3.scale.category10().range())
                 .transitionDuration(300)

src/models/distribution.js

@@ -13,7 +13,6 @@ nv.models.distribution = function() {
     , color = nv.utils.defaultColor()
     , scale = d3.scale.linear()
     , domain
-    , transitionDuration = 250
     ;
 
   //============================================================
@@ -70,7 +69,7 @@ nv.models.distribution = function() {
           .attr(axis + '1', function(d,i) { return scale0(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale0(getData(d,i)) })
       distWrap.exit().selectAll('line.nv-dist' + axis)
-          .transition().duration(transitionDuration)
+          .transition()
           .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)
@@ -80,7 +79,7 @@ nv.models.distribution = function() {
           .attr(naxis + '1', 0)
           .attr(naxis + '2', size);
       dist
-          .transition().duration(transitionDuration)
+          .transition()
           .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
 
@@ -141,13 +140,6 @@ nv.models.distribution = function() {
     color = nv.utils.getColor(_);
     return chart;
   };
-
-  chart.transitionDuration = function(_) {
-    if (!arguments.length) return transitionDuration;
-    transitionDuration = _;
-    return chart;
-  };
-
   //============================================================
 
 

src/models/scatter.js

@@ -38,7 +38,6 @@ nv.models.scatter = function() {
     , singlePoint  = false
     , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
     , useVoronoi   = true
-    , transitionDuration = 250
     ;
 
   //============================================================
@@ -343,15 +342,12 @@ nv.models.scatter = function() {
           .style('stroke-opacity', 1e-6)
           .style('fill-opacity', 1e-6);
       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 });
       groups
-          .transition().duration(transitionDuration)
+          .transition()
           .style('fill', function(d,i) { return color(d, i) })
           .style('stroke', function(d,i) { return color(d, i) })
           .style('stroke-opacity', 1)
@@ -370,7 +366,6 @@ 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();
@@ -382,7 +377,6 @@ 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) });
@@ -404,7 +398,7 @@ nv.models.scatter = function() {
             );
         points.exit().remove();
         groups.exit().selectAll('path.nv-point')
-            .transition().duration(transitionDuration)
+            .transition()
             .attr('transform', function(d,i) {
               return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
             })
@@ -417,7 +411,6 @@ 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)) + ')'
@@ -675,12 +668,6 @@ nv.models.scatter = function() {
     return chart;
   };
 
-  chart.transitionDuration = function(_) {
-    if (!arguments.length) return transitionDuration;
-    transitionDuration = _;
-    return chart;
-  };
-
   //============================================================
 
 

src/models/scatterChart.js

@@ -38,6 +38,7 @@ nv.models.scatterChart = function() {
     , defaultState = null
     , dispatch     = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
     , noData       = "No Data Available."
+    , transitionDuration = 250
     ;
 
   scatter
@@ -107,7 +108,7 @@ nv.models.scatterChart = function() {
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - 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
@@ -614,12 +615,8 @@ nv.models.scatterChart = function() {
   };
 
   chart.transitionDuration = function(_) {
-    if (!arguments.length) return scatter.transitionDuration();
+    if (!arguments.length) return transitionDuration;
-    scatter.transitionDuration(_);
+    transitionDuration = _;
-    xAxis.transitionDuration(_);
-    yAxis.transitionDuration(_);
-    distX.transitionDuration(_);
-    distY.transitionDuration(_);
     return chart;
   };
 

src/models/scatterPlusLineChart.js

@@ -38,6 +38,7 @@ nv.models.scatterPlusLineChart = function() {
     , defaultState = null
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
     , noData       = "No Data Available."
+    , transitionDuration = 250
     ;
 
   scatter
@@ -106,7 +107,7 @@ nv.models.scatterPlusLineChart = function() {
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - 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
@@ -253,6 +254,7 @@ nv.models.scatterPlusLineChart = function() {
                        .style('stroke-opacity', 0);
 
       regLine
+          .transition()
           .attr('x1', x.range()[0])
           .attr('x2', x.range()[1])
           .attr('y1', function(d,i) {return y(x.domain()[0] * d.slope + d.intercept) })
@@ -604,12 +606,8 @@ nv.models.scatterPlusLineChart = function() {
   };
 
   chart.transitionDuration = function(_) {
-    if (!arguments.length) return scatter.transitionDuration();
+    if (!arguments.length) return transitionDuration;
-    scatter.transitionDuration(_);
+    transitionDuration = _;
-    xAxis.transitionDuration(_);
-    yAxis.transitionDuration(_);
-    distX.transitionDuration(_);
-    distY.transitionDuration(_);
     return chart;
   };