Apply polar coordinates to move text inside the slice during sunburst transitions

- rename pxtxt to textPosAngle and other cleanups
- keep textPosAngle inside transform

Author: archmoj

src/traces/pie/plot.js

@@ -175,16 +175,12 @@ function plot(gd, cdModule) {
 
                             transform = transformOutsideText(textBB, pt);
                         }
-
-                        if(transform.pxtxt) {
-                            // copy text position if not at the middle
-                            pt.pxtxt = transform.pxtxt;
-                        }
                     }
 
-                    var pxtxt = pt.pxtxt || pt.pxmid;
-                    transform.targetX = cx + pxtxt[0] * transform.rCenter + (transform.x || 0);
-                    transform.targetY = cy + pxtxt[1] * transform.rCenter + (transform.y || 0);
+                    var textPosAngle = transform.textPosAngle;
+                    var textXY = textPosAngle === undefined ? pt.pxmid : getCoords(cd0.r, textPosAngle);
+                    transform.targetX = cx + textXY[0] * transform.rCenter + (transform.x || 0);
+                    transform.targetY = cy + textXY[1] * transform.rCenter + (transform.y || 0);
                     computeTransform(transform, textBB);
 
                     // save some stuff to use later ensure no labels overlap
@@ -572,6 +568,7 @@ function transformInsideText(textBB, pt, cd0) {
     var isAuto = orientation === 'auto';
     var isCircle = (ring === 1) && (Math.abs(pt.startangle - pt.stopangle) === Math.PI * 2);
     var allTransforms = [];
+    var newT;
 
     if(!isAuto) {
         // max size if text is placed (horizontally) at the top or bottom of the arc
@@ -583,13 +580,12 @@ function transformInsideText(textBB, pt, cd0) {
 
                 var closestEdge = dStart < dStop ? dStart : dStop;
 
-                var newT;
                 if(key === 'tan') {
                     newT = calcTanTransform(textBB, r, ring, closestEdge, 0);
                 } else { // case of 'rad'
                     newT = calcRadTransform(textBB, r, ring, closestEdge, Math.PI / 2);
                 }
-                newT.pxtxt = getCoords(r, angle);
+                newT.textPosAngle = angle;
 
                 allTransforms.push(newT);
             }
@@ -616,25 +612,30 @@ function transformInsideText(textBB, pt, cd0) {
         // this inscribes the text rectangle in a circle, which is then inscribed
         // in the slice, so it will be an underestimate, which some day we may want
         // to improve so this case can get more use
-        var transform = {
+        newT = {
             scale: rInscribed * r * 2 / textDiameter,
 
             // and the center position and rotation in this case
             rCenter: 1 - rInscribed,
             rotate: 0
         };
 
-        if(transform.scale >= 1) return transform;
+        newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
+        if(newT.scale >= 1) return newT;
 
-        allTransforms.push(transform);
+        allTransforms.push(newT);
     }
 
     if(isAuto || isRadial) {
-        allTransforms.push(calcRadTransform(textBB, r, ring, halfAngle, midAngle));
+        newT = calcRadTransform(textBB, r, ring, halfAngle, midAngle);
+        newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
+        allTransforms.push(newT);
     }
 
     if(isAuto || isTangential) {
-        allTransforms.push(calcTanTransform(textBB, r, ring, halfAngle, midAngle));
+        newT = calcTanTransform(textBB, r, ring, halfAngle, midAngle);
+        newT.textPosAngle = (pt.startangle + pt.stopangle) / 2;
+        allTransforms.push(newT);
     }
 
     var id = 0;

src/traces/sunburst/plot.js

@@ -151,8 +151,8 @@ function plotOne(gd, cd, element, transitionOpts) {
     var pathSlice = function(d) { return Lib.pathAnnulus(d.rpx0, d.rpx1, d.x0, d.x1, cx, cy); };
     // slice text translate x/y
 
-    var getTargetX = function(d) { return cx + (d.pxtxt || d.pxmid)[0] * d.transform.rCenter + (d.transform.x || 0); };
-    var getTargetY = function(d) { return cy + (d.pxtxt || d.pxmid)[1] * d.transform.rCenter + (d.transform.y || 0); };
+    var getTargetX = function(d) { return cx + getTextXY(d)[0] * d.transform.rCenter + (d.transform.x || 0); };
+    var getTargetY = function(d) { return cy + getTextXY(d)[1] * d.transform.rCenter + (d.transform.y || 0); };
 
     slices = slices.data(sliceData, helpers.getPtId);
 
@@ -264,11 +264,6 @@ function plotOne(gd, cd, element, transitionOpts) {
         // position the text relative to the slice
         var textBB = Drawing.bBox(sliceText.node());
         pt.transform = transformInsideText(textBB, pt, cd0);
-        if(pt.transform.pxtxt) {
-            // copy text position if not at the middle
-            pt.pxtxt = pt.transform.pxtxt;
-        }
-
         pt.transform.targetX = getTargetX(pt);
         pt.transform.targetY = getTargetY(pt);
 
@@ -382,6 +377,7 @@ function plotOne(gd, cd, element, transitionOpts) {
             prev = {
                 rpx1: pt.rpx1,
                 transform: {
+                    textPosAngle: transform.textPosAngle,
                     scale: 0,
                     rotate: transform.rotate,
                     rCenter: transform.rCenter,
@@ -414,6 +410,7 @@ function plotOne(gd, cd, element, transitionOpts) {
             }
         }
 
+        var textPosAngleFn = d3.interpolate(prev.transform.textPosAngle, pt.transform.textPosAngle);
         var rpx1Fn = d3.interpolate(prev.rpx1, pt.rpx1);
         var x0Fn = d3.interpolate(prev.x0, pt.x0);
         var x1Fn = d3.interpolate(prev.x1, pt.x1);
@@ -434,11 +431,13 @@ function plotOne(gd, cd, element, transitionOpts) {
             var x1 = x1Fn(t);
             var rCenter = rCenterFn(t);
             var pxmid = rx2px(rpx1, (x0 + x1) / 2);
+            var textPosAngle = textPosAngleFn(t);
 
             var d = {
-                pxtxt: pt.pxtxt || pxmid,
                 pxmid: pxmid,
+                rpx1: rpx1,
                 transform: {
+                    textPosAngle: textPosAngle,
                     rCenter: rCenter,
                     x: transform.x,
                     y: transform.y
@@ -447,7 +446,6 @@ function plotOne(gd, cd, element, transitionOpts) {
 
             recordMinTextSize(trace.type, transform, fullLayout);
             return {
-                rpx1: rpx1Fn(t),
                 transform: {
                     targetX: getTargetX(d),
                     targetY: getTargetY(d),
@@ -613,3 +611,11 @@ function getInscribedRadiusFraction(pt) {
         ));
     }
 }
+
+function getTextXY(d) {
+    return getCoords(d.rpx1, d.transform.textPosAngle);
+}
+
+function getCoords(r, angle) {
+    return [r * Math.sin(angle), -r * Math.cos(angle)];
+}