RenderWatch: Added render watch to scatterchart and submodels

deprecated/scatterChart.js

@@ -46,6 +46,7 @@ nv.models.scatterChart = function() {
     //nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
   };
 
+  var renderWatch = nv.utils.renderWatch(dispatch);
 
   function chart(selection) {
     selection.each(function(data) {

examples/scatter.html

@@ -35,7 +35,6 @@ nv.addGraph({
                 .useVoronoi(false)
                 //.interactive(false)
 
-
     d3.select('#test1')
       .attr('width', width)
       .attr('height', height)

examples/scatterChart.html

@@ -70,6 +70,9 @@ nv.addGraph(function() {
                 .color(d3.scale.category10().range())
                 .transitionDuration(300)
                 ;
+  chart.dispatch.on('renderEnd', function(){
+    console.log('render complete');
+  });
 
   chart.xAxis.tickFormat(d3.format('.02f'));
   chart.yAxis.tickFormat(d3.format('.02f'));

src/models/axis.js

@@ -20,12 +20,10 @@ nv.models.axis = function() {
     , isOrdinal = false
     , ticks = null
     , axisLabelDistance = 12 //The larger this number is, the closer the axis label is to the axis.
-    , duration = 1000
+    , duration = 250
     , dispatch = d3.dispatch('renderEnd')
     , axisRendered = false
     , maxMinRendered = false
-    , renderStack = []
-    , renderWatch = nv.utils.renderWatch(dispatch, duration)
     ;
   axis
     .scale(scale)
@@ -40,41 +38,12 @@ nv.models.axis = function() {
   // Private Variables
   //------------------------------------------------------------
 
-  var scale0;
+  var scale0
+    , renderWatch = nv.utils.renderWatch(dispatch, duration)
+    ;
 
   //============================================================
 
-  var dispatchRendered = function(){
-    if (renderStack.every(function(d){ return d._rendered; }))
-    {
-      renderStack.forEach(function(d){ d._rendered = false; });
-      dispatch.renderEnd.apply(this, arguments);
-    }
-  }
-
-  var addTransition = function(selection, arg){
-    renderStack.push(selection);
-    if (duration === 0)
-    {
-      selection._rendered = true;
-      return selection;
-    }
-    else
-    {
-      selection._rendered = false;
-      return selection
-        .transition()
-        .duration(duration)
-        .each('end', function(d, i){
-          if (i === selection[0].length - 1)
-          {
-            selection._rendered = true;
-            dispatchRendered(arg);
-          }
-        });
-    }
-  }
-
   function chart(selection) {
     renderWatch.reset();
     selection.each(function(data) {

src/models/distribution.js

@@ -13,6 +13,8 @@ nv.models.distribution = function() {
     , color = nv.utils.defaultColor()
     , scale = d3.scale.linear()
     , domain
+    , duration = 250
+    , dispatch = d3.dispatch('renderEnd')
     ;
 
   //============================================================
@@ -23,11 +25,13 @@ nv.models.distribution = function() {
   //------------------------------------------------------------
 
   var scale0;
+  var renderWatch = nv.utils.renderWatch(dispatch, duration);
 
   //============================================================
 
 
   function chart(selection) {
+    renderWatch.reset();
     selection.each(function(data) {
       var availableLength = width - (axis === 'x' ? margin.left + margin.right : margin.top + margin.bottom),
           naxis = axis == 'x' ? 'y' : 'x',
@@ -68,8 +72,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)) })
-      distWrap.exit().selectAll('line.nv-dist' + axis)
-          .transition()
+      renderWatch.transition(distWrap.exit().selectAll('line.nv-dist' + axis), 'dist exit')
+          // .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)
@@ -78,8 +82,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);
-      dist
-          .transition()
+      renderWatch.transition(dist, 'dist')
+          // .transition()
           .attr(axis + '1', function(d,i) { return scale(getData(d,i)) })
           .attr(axis + '2', function(d,i) { return scale(getData(d,i)) })
 
@@ -87,7 +91,7 @@ nv.models.distribution = function() {
       scale0 = scale.copy();
 
     });
-
+    renderWatch.renderEnd('distribution immediate');
     return chart;
   }
 
@@ -96,6 +100,7 @@ nv.models.distribution = function() {
   // Expose Public Variables
   //------------------------------------------------------------
   chart.options = nv.utils.optionsFunc.bind(chart);
+  chart.dispatch = dispatch;
   
   chart.margin = function(_) {
     if (!arguments.length) return margin;
@@ -141,6 +146,13 @@ nv.models.distribution = function() {
     color = nv.utils.getColor(_);
     return chart;
   };
+
+  chart.duration = function(_) {
+    if (!arguments.length) return duration;
+    duration = _;
+    renderWatch.reset(duration);
+    return chart;
+  };
   //============================================================
 
 

src/models/multiBar.js

@@ -28,7 +28,6 @@ nv.models.multiBar = function() {
     , yRange
     , groupSpacing = 0.1
     , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
-    , renderWatch = nv.utils.renderWatch(dispatch, duration)
     ;
 
   //============================================================
@@ -39,6 +38,7 @@ nv.models.multiBar = function() {
   //------------------------------------------------------------
 
   var x0, y0 //used to store previous scales
+      , renderWatch = nv.utils.renderWatch(dispatch, duration)
       ;
 
 

src/models/multiBarChart.js

@@ -37,7 +37,7 @@ nv.models.multiBarChart = function() {
     , dispatch = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd')
     , controlWidth = function() { return showControls ? 180 : 0 }
     , duration = 250
-    , renderWatch = nv.utils.renderWatch(dispatch)
+    
     ;
 
   multibar
@@ -62,7 +62,8 @@ nv.models.multiBarChart = function() {
   //============================================================
   // Private Variables
   //------------------------------------------------------------
-
+  var renderWatch = nv.utils.renderWatch(dispatch);
+  
   var showTooltip = function(e, offsetElement) {
     var left = e.pos[0] + ( offsetElement.offsetLeft || 0 ),
         top = e.pos[1] + ( offsetElement.offsetTop || 0),
@@ -78,7 +79,7 @@ nv.models.multiBarChart = function() {
 
   function chart(selection) {
     renderWatch.reset();
-    renderWatch.addModels(multibar, xAxis, yAxis);
+    renderWatch.models(multibar, xAxis, yAxis);
     selection.each(function(data) {
       var container = d3.select(this),
           that = this;

src/models/scatter.js

@@ -36,8 +36,9 @@ nv.models.scatter = function() {
     , sizeDomain   = null // Override point size domain
     , sizeRange    = null
     , singlePoint  = false
-    , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout')
+    , dispatch     = d3.dispatch('elementClick', 'elementMouseover', 'elementMouseout', 'renderEnd')
     , useVoronoi   = true
+    , duration     = 250
     ;
 
   //============================================================
@@ -50,12 +51,14 @@ nv.models.scatter = function() {
   var x0, y0, z0 // used to store previous scales
     , timeoutID
     , needsUpdate = false // Flag for when the points are visually updating, but the interactive layer is behind, to disable tooltips
+    , renderWatch = nv.utils.renderWatch(dispatch, duration)
     ;
 
   //============================================================
 
 
   function chart(selection) {
+    renderWatch.reset();
     selection.each(function(data) {
       var availableWidth = width - margin.left - margin.right,
           availableHeight = height - margin.top - margin.bottom,
@@ -333,7 +336,6 @@ nv.models.scatter = function() {
       }
 
       needsUpdate = true;
-
       var groups = wrap.select('.nv-groups').selectAll('.nv-group')
           .data(function(d) { return d }, function(d) { return d.key });
       groups.enter().append('g')
@@ -344,8 +346,9 @@ nv.models.scatter = function() {
       groups
           .attr('class', function(d,i) { return 'nv-group nv-series-' + i })
           .classed('hover', function(d) { return d.hover });
-      groups
-          .transition()
+      renderWatch.transition(groups, 'scatter: groups')
+      // groups
+      //     .transition()
           .style('fill', function(d,i) { return color(d, i) })
           .style('stroke', function(d,i) { return color(d, i) })
           .style('stroke-opacity', 1)
@@ -353,7 +356,6 @@ nv.models.scatter = function() {
 
 
       if (onlyCircles) {
-
         var points = groups.selectAll('circle.nv-point')
             .data(function(d) { return d.values }, pointKey);
         points.enter().append('circle')
@@ -363,7 +365,8 @@ nv.models.scatter = function() {
             .attr('cy', function(d,i) { return nv.utils.NaNtoZero(y0(getY(d,i))) })
             .attr('r', function(d,i) { return Math.sqrt(z(getSize(d,i))/Math.PI) });
         points.exit().remove();
-        groups.exit().selectAll('path.nv-point').transition()
+        renderWatch.transition(groups.exit().selectAll('path.nv-point'), 'scatter exit')
+        // groups.exit().selectAll('path.nv-point').transition()
             .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();
@@ -374,7 +377,8 @@ nv.models.scatter = function() {
             .classed('hover',false)
             ;
         });
-        points.transition()
+        renderWatch.transition(points, 'scatter points')
+        // points.transition()
             .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) });
@@ -395,8 +399,9 @@ nv.models.scatter = function() {
                 .size(function(d,i) { return z(getSize(d,i)) })
             );
         points.exit().remove();
-        groups.exit().selectAll('path.nv-point')
-            .transition()
+        renderWatch.transition(groups.exit().selectAll('path.nv-point'), 'scatter exit')
+        // groups.exit().selectAll('path.nv-point')
+        //     .transition()
             .attr('transform', function(d,i) {
               return 'translate(' + x(getX(d,i)) + ',' + y(getY(d,i)) + ')'
             })
@@ -408,7 +413,8 @@ nv.models.scatter = function() {
             .classed('hover',false)
             ;
         });
-        points.transition()
+        renderWatch.transition(points, 'scatter points')
+        // points.transition()
             .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)) + ')'
@@ -432,7 +438,7 @@ nv.models.scatter = function() {
       z0 = z.copy();
 
     });
-
+    renderWatch.renderEnd('scatter immediate');
     return chart;
   }
 
@@ -667,6 +673,13 @@ nv.models.scatter = function() {
     return chart;
   };
 
+  chart.duration = function(_) {
+    if (!arguments.length) return duration;
+    duration = _;
+    renderWatch.reset(duration);
+    return chart;
+  };
+
   //============================================================
 
 

src/models/scatterChart.js

@@ -36,9 +36,10 @@ nv.models.scatterChart = function() {
     , tooltip      = null
     , state = {}
     , defaultState = null
-    , dispatch     = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState')
+    , dispatch     = d3.dispatch('tooltipShow', 'tooltipHide', 'stateChange', 'changeState', 'renderEnd')
     , noData       = "No Data Available."
     , transitionDuration = 250
+    , duration = 250
     ;
 
   scatter
@@ -70,6 +71,7 @@ nv.models.scatterChart = function() {
   //------------------------------------------------------------
 
   var x0, y0;
+  var renderWatch = nv.utils.renderWatch(dispatch, duration);
 
   var showTooltip = function(e, offsetElement) {
     //TODO: make tooltip style an option between single or dual on axes (maybe on all charts with axes?)
@@ -99,6 +101,8 @@ nv.models.scatterChart = function() {
 
 
   function chart(selection) {
+    renderWatch.reset();
+    renderWatch.models(scatter, xAxis, yAxis, distX, distY);
     selection.each(function(data) {
       var container = d3.select(this),
           that = this;
@@ -108,7 +112,12 @@ nv.models.scatterChart = function() {
           availableHeight = (height || parseInt(container.style('height')) || 400)
                              - margin.top - margin.bottom;
 
-      chart.update = function() { container.transition().duration(transitionDuration).call(chart); };
+      chart.update = function() {
+        if (duration === 0)
+          container.call(chart);
+        else
+          container.transition().duration(duration).call(chart);
+      };
       chart.container = this;
 
       //set state.disabled
@@ -239,7 +248,6 @@ nv.models.scatterChart = function() {
 
       if (yPadding !== 0)
         scatter.yDomain(null);
-
       wrap.select('.nv-scatterWrap')
           .datum(data.filter(function(d) { return !d.disabled }))
           .call(scatter);
@@ -440,7 +448,7 @@ nv.models.scatterChart = function() {
 
 
     });
-
+    renderWatch.renderEnd('scatterChart immediate');
     return chart;
   }
 
@@ -614,11 +622,15 @@ nv.models.scatterChart = function() {
     noData = _;
     return chart;
   };
-
-  chart.transitionDuration = function(_) {
-    if (!arguments.length) return transitionDuration;
-    transitionDuration = _;
+  chart.duration = function(_) {
+    if (!arguments.length) return duration;
+    duration = _;
+    renderWatch.reset(duration);
     return chart;
+  }
+  chart.transitionDuration = function(_) {
+    nv.deprecated('scatterChart.transitionDuration');
+    return chart.duration(_);
   };
 
   //============================================================

src/utils.js

@@ -138,7 +138,7 @@ nv.utils.renderWatch = function(dispatch, duration) {
   var _duration = duration !== undefined ? duration : 250;
   var renderStack = [];
   var self = this;
-  this.addModels = function(models) {
+  this.models = function(models) {
     models = [].slice.call(arguments, 0);
     models.forEach(function(model){
       model.__rendered = false;
@@ -165,8 +165,10 @@ nv.utils.renderWatch = function(dispatch, duration) {
                _duration !== undefined ? _duration :
                250;
     selection.__rendered = false;
+    
     if (renderStack.indexOf(selection) < 0)
       renderStack.push(selection);
+
     if (duration === 0)
     {
       selection.__rendered = true;
@@ -174,7 +176,9 @@ nv.utils.renderWatch = function(dispatch, duration) {
     }
     else
     {
-      selection.__rendered = selection.length ? false : true;
+      selection.__rendered = selection.length === 0 ? true :
+                             selection.every( function(d){ return !d.length; }) ? true :
+                             false;
       var n = 0;
       return selection
         .transition()