Merge pull request #1011 from plotly/fix-text-animation

Adjust d3 update to enable text mode animation

Author: rreusser

src/components/drawing/index.js

@@ -343,6 +343,7 @@ drawing.textPointStyle = function(s, trace) {
     s.each(function(d) {
         var p = d3.select(this),
             text = d.tx || trace.text;
+
         if(!text || Array.isArray(text)) {
             // isArray test handles the case of (intentionally) missing
             // or empty text within a text array

src/traces/scatter/plot.js

@@ -443,21 +443,34 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
         }
 
         // text points
-
         selection = s.selectAll('g');
-
         join = selection.data(textFilter, keyFunc);
 
         // each text needs to go in its own 'g' in case
         // it gets converted to mathjax
-        join.enter().append('g')
-            .append('text');
+        join.enter().append('g').append('text');
 
         join.each(function(d) {
-            var sel = d3.select(this).select('text');
+            var sel = transition(d3.select(this).select('text'));
             Drawing.translatePoint(d, sel, xa, ya);
         });
 
+        join.selectAll('text')
+            .call(Drawing.textPointStyle, trace)
+            .each(function(d) {
+
+                // This just *has* to be totally custom becuase of SVG text positioning :(
+                // It's obviously copied from translatePoint; we just can't use that
+                //
+                // put xp and yp into d if pixel scaling is already done
+                var x = d.xp || xa.c2p(d.x),
+                    y = d.yp || ya.c2p(d.y);
+
+                d3.select(this).selectAll('tspan').each(function() {
+                    transition(d3.select(this)).attr({x: x, y: y});
+                });
+            });
+
         join.exit().remove();
     }