Refactor scatter traces

plotly · rreusser · May 18, 2016 · May 31, 2016 · Jun 2, 2016 · Jun 2, 2016
commit 82071e371876c6db03985b66b537d1463a831d59
diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js
@@ -46,11 +46,10 @@ drawing.setRect = function(s, x, y, w, h) {
     s.call(drawing.setPosition, x, y).call(drawing.setSize, w, h);
 };
 
-drawing.translatePoints = function(s, xa, ya, transitionConfig, trace) {
+drawing.translatePoints = function(s, xa, ya, trace, transitionConfig, joinDirection) {
 
     var hasTransition = transitionConfig && (transitionConfig || {}).duration > 0;
 
-
     if (hasTransition) {
         var size = s.size();
     }
@@ -67,7 +66,7 @@ drawing.translatePoints = function(s, xa, ya, transitionConfig, trace) {
             } else {
               if (hasTransition) {
                 var trans;
-                if (!transitionConfig.direction) {
+                if (!joinDirection) {
                     trans = p.transition()
                         .delay(transitionConfig.delay + transitionConfig.cascade / size * i)
                         .duration(transitionConfig.duration)
@@ -77,14 +76,14 @@ drawing.translatePoints = function(s, xa, ya, transitionConfig, trace) {
                     if (trace) {
                       trans.call(drawing.pointStyle, trace)
                     }
-                } else if (transitionConfig.direction === -1) {
+                } else if (joinDirection === -1) {
                     trans = p.style('opacity', 1)
                         .transition()
                             .duration(transitionConfig.duration)
                             .ease(transitionConfig.easing)
                             .style('opacity', 0)
                             .remove();
-                } else if (transitionConfig.direction === 1) {
+                } else if (joinDirection === 1) {
                     trans = p.attr('transform', 'translate('+x+','+y+')')
 
                     if (trace) {

diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
@@ -1561,7 +1561,7 @@ Plotly.animate = function animate (gd, newData, transitionOpts, traces) {
         var trace = gd._fullData[traceIdx];
         var module = trace._module;
 
-        if (!module.animate) {
+        if (!module.animatable) {
             continue;
         }
 
@@ -1599,11 +1599,9 @@ Plotly.animate = function animate (gd, newData, transitionOpts, traces) {
 		var subplotInfo, _module;
 
 		for(var i = 0; i < subplots.length; i++) {
-            console.log('i:', i);
   		    subplotInfo = fullLayout._plots[subplots[i]];
 
 		    for(var j = 0; j < modules.length; j++) {
-                console.log('j:', j);
 			    _module = modules[j];
 			    if(_module.setPositions) _module.setPositions(gd, subplotInfo);
 		    }
@@ -1612,28 +1610,22 @@ Plotly.animate = function animate (gd, newData, transitionOpts, traces) {
 
 	doSetPositions();
 
-    var animateList = [];
     var restyleList = [];
 
-
     function doAnimations () {
         var a, i, j;
-        for (i = 0; i < animateList.length; i++) {
-            a = animateList[i];
-            var basePlotModules = fullLayout._basePlotModules;
-            for(j = 0; j < basePlotModules.length; j++) {
-                basePlotModules[j].plot(gd, transitionOpts);
-            }
+        var basePlotModules = fullLayout._basePlotModules;
+        for(j = 0; j < basePlotModules.length; j++) {
+            basePlotModules[j].plot(gd, animatedTraces, transitionOpts);
         }
-
         if (!transitionOpts.leadingEdgeRestyle) {
             return new Promise(function(resolve, reject) {
                 setTimeout(resolve, transitionOpts.duration);
             });
         }
     }
 
-    for (var i = 0; i < animatedTraces.length; i++) {
+    /*for (var i = 0; i < animatedTraces.length; i++) {
         var trace = gd._fullData[animatedTraces[i]];
         var module = trace._module;
         var cd = [];
@@ -1655,22 +1647,14 @@ Plotly.animate = function animate (gd, newData, transitionOpts, traces) {
         cd[0].trace = trace;
 
         gd.calcdata[traces[i]] = cd;
-    }
+    }*/
 
     for (i = 0; i < traces.length; i++) {
         var traceIdx = traces[i];
-
-        var cont = gd.data[traceIdx];
         var contFull = gd._fullData[traceIdx];
         var module = contFull._module;
 
-        if (module.animate) {
-            animateList.push({
-                module: module,
-                contFull: contFull,
-                newData: newData[i]
-            });
-        } else {
+        if (!module.animatable) {
             var thisTrace = [traceIdx];
             var thisUpdate = {};
 

diff --git a/src/plots/cartesian/index.js b/src/plots/cartesian/index.js
@@ -27,7 +27,7 @@ exports.attrRegex = constants.attrRegex;
 
 exports.attributes = require('./attributes');
 
-exports.plot = function(gd, transitionOpts) {
+exports.plot = function(gd, traces, transitionOpts) {
     var fullLayout = gd._fullLayout,
         subplots = Plots.getSubplotIds(fullLayout, 'cartesian'),
         calcdata = gd.calcdata,
@@ -40,6 +40,9 @@ exports.plot = function(gd, transitionOpts) {
             var cd = calcdata[i];
             var trace = cd[0].trace;
 
+            // Skip trace if whitelist provided and it's not whitelisted:
+            // if (Array.isArray(traces) && traces.indexOf(i) === -1) continue;
+
             if(trace.xaxis + trace.yaxis === subplot) {
                 cdSubplot.push(cd);
             }
@@ -63,15 +66,20 @@ exports.plot = function(gd, transitionOpts) {
         return cdModule;
     }
 
-    function keyFunc (d) {
-        return d[0].trace.uid;
-    }
-
     for(var i = 0; i < subplots.length; i++) {
         var subplot = subplots[i],
             subplotInfo = fullLayout._plots[subplot],
             cdSubplot = getCdSubplot(calcdata, subplot);
 
+        // remove old traces, then redraw everything
+        // TODO: scatterlayer is manually excluded from this since it knows how
+        // to update instead of fully removing and redrawing every time. The
+        // remaining plot traces should also be able to do this. Once implemented,
+        // we won't need this - which should sometimes be a big speedup.
+        if(subplotInfo.plot) {
+            subplotInfo.plot.selectAll('g:not(.scatterlayer)').selectAll('g.trace').remove();
+        }
+
         for(var j = 0; j < modules.length; j++) {
             var _module = modules[j];
 
@@ -81,25 +89,7 @@ exports.plot = function(gd, transitionOpts) {
             // plot all traces of this type on this subplot at once
             var cdModule = getCdModule(cdSubplot, _module);
 
-            var tracelayer = subplotInfo.plot.select('g.' + _module.name + 'layer');
-            var subplotJoin = tracelayer.selectAll('g.trace').data(cdModule, keyFunc);
-
-            subplotJoin.enter()
-                .append('g')
-                    .classed('trace', true)
-                    .classed(_module.name, true)
-                    .each(function(d) {
-                        d[0].trace._module.plot(gd, subplotInfo, d, this)
-                    });
-
-            subplotJoin.transition()
-                .each(function(d) {
-                    d[0].trace._module.plot(gd, subplotInfo, d, this, transitionOpts)
-                });
-
-
-            subplotJoin.exit()
-                .remove()
+            _module.plot(gd, subplotInfo, cdModule, traces, transitionOpts);
         }
     }
 };