Merge pull request #5826 from plotly/more-d3-interpolate-use

Replace `d3.interpolate` method with `d3-interpolate` module in `icicle`, `indicator`, `parcats`, `sunburst` and `treemap`

Author: archmoj

draftlogs/5826_change.md

@@ -0,0 +1 @@
+ - replace `d3.interpolate` method with `d3-interpolate` module in `icicle`, `indicator`, `parcats`, `sunburst` and `treemap` [[#5826](https://github.com/plotly/plotly.js/pull/5826)]

src/traces/indicator/plot.js

@@ -1,6 +1,8 @@
 'use strict';
 
 var d3 = require('@plotly/d3');
+var interpolate = require('d3-interpolate').interpolate;
+var interpolateNumber = require('d3-interpolate').interpolateNumber;
 
 var Lib = require('../../lib');
 var strScale = Lib.strScale;
@@ -593,7 +595,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
                 .each('interrupt', function() { writeNumber(); onComplete && onComplete(); })
                 .attrTween('text', function() {
                     var that = d3.select(this);
-                    var interpolator = d3.interpolateNumber(cd[0].lastY, cd[0].y);
+                    var interpolator = interpolateNumber(cd[0].lastY, cd[0].y);
                     trace._lastValue = cd[0].y;
 
                     var transitionFmt = transitionFormat(trace.number.valueformat, fmt, cd[0].lastY, cd[0].y);
@@ -650,7 +652,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
                     var to = deltaValue(cd[0]);
                     var from = trace._deltaLastValue;
                     var transitionFmt = transitionFormat(trace.delta.valueformat, deltaFmt, from, to);
-                    var interpolator = d3.interpolateNumber(from, to);
+                    var interpolator = interpolateNumber(from, to);
                     trace._deltaLastValue = to;
                     return function(t) {
                         that.text(deltaFormatText(interpolator(t), transitionFmt));
@@ -792,9 +794,9 @@ function styleShape(p) {
 // arcs from their current angle to the specified new angle.
 function arcTween(arc, endAngle, newAngle) {
     return function() {
-        var interpolate = d3.interpolate(endAngle, newAngle);
+        var interp = interpolate(endAngle, newAngle);
         return function(t) {
-            return arc.endAngle(interpolate(t))();
+            return arc.endAngle(interp(t))();
         };
     };
 }

src/traces/parcats/parcats.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var d3 = require('@plotly/d3');
+var interpolateNumber = require('d3-interpolate').interpolateNumber;
 var Plotly = require('../../plot_api/plot_api');
 var Fx = require('../../components/fx');
 var Lib = require('../../lib');
@@ -1609,7 +1610,7 @@ function buildSvgPath(leftXPositions, pathYs, dimWidths, pathHeight, curvature)
     var d;
 
     for(d = 0; d < dimWidths.length - 1; d++) {
-        refInterpolator = d3.interpolateNumber(dimWidths[d] + leftXPositions[d], leftXPositions[d + 1]);
+        refInterpolator = interpolateNumber(dimWidths[d] + leftXPositions[d], leftXPositions[d + 1]);
         xRefPoints1.push(refInterpolator(curvature));
         xRefPoints2.push(refInterpolator(1 - curvature));
     }

src/traces/sunburst/plot.js

@@ -2,6 +2,7 @@
 
 var d3 = require('@plotly/d3');
 var d3Hierarchy = require('d3-hierarchy');
+var interpolate = require('d3-interpolate').interpolate;
 
 var Drawing = require('../../components/drawing');
 var Lib = require('../../lib');
@@ -307,7 +308,9 @@ function plotOne(gd, cd, element, transitionOpts) {
             // if pt to remove:
             // - if 'below' where the root-node used to be: shrink it radially inward
             // - otherwise, collapse it clockwise or counterclockwise which ever is shortest to theta=0
-            next = pt.rpx1 < entryPrev.rpx1 ? {rpx0: 0, rpx1: 0} : {x0: a, x1: a};
+            next = pt.rpx1 < entryPrev.rpx1 ?
+                {x0: pt.x0, x1: pt.x1, rpx0: 0, rpx1: 0} :
+                {x0: a, x1: a, rpx0: pt.rpx0, rpx1: pt.rpx1};
         } else {
             // this happens when maxdepth is set, when leaves must
             // be removed and the rootPt is new (i.e. does not have a 'prev' object)
@@ -326,14 +329,14 @@ function plotOne(gd, cd, element, transitionOpts) {
                 }
             });
             var n = parentChildren.length;
-            var interp = d3.interpolate(parent.x0, parent.x1);
+            var interp = interpolate(parent.x0, parent.x1);
             next = {
                 rpx0: rMax, rpx1: rMax,
                 x0: interp(ci / n), x1: interp((ci + 1) / n)
             };
         }
 
-        return d3.interpolate(prev, next);
+        return interpolate(prev, next);
     }
 
     function makeUpdateSliceInterpolator(pt) {
@@ -372,7 +375,7 @@ function plotOne(gd, cd, element, transitionOpts) {
             }
         }
 
-        return d3.interpolate(prev, next);
+        return interpolate(prev, next);
     }
 
     function makeUpdateTextInterpolator(pt) {
@@ -419,19 +422,19 @@ 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);
-        var scaleFn = d3.interpolate(prev.transform.scale, transform.scale);
-        var rotateFn = d3.interpolate(prev.transform.rotate, transform.rotate);
+        var textPosAngleFn = interpolate(prev.transform.textPosAngle, pt.transform.textPosAngle);
+        var rpx1Fn = interpolate(prev.rpx1, pt.rpx1);
+        var x0Fn = interpolate(prev.x0, pt.x0);
+        var x1Fn = interpolate(prev.x1, pt.x1);
+        var scaleFn = interpolate(prev.transform.scale, transform.scale);
+        var rotateFn = interpolate(prev.transform.rotate, transform.rotate);
 
         // smooth out start/end from entry, to try to keep text inside sector
         // while keeping transition smooth
         var pow = transform.rCenter === 0 ? 3 :
             prev.transform.rCenter === 0 ? 1 / 3 :
             1;
-        var _rCenterFn = d3.interpolate(prev.transform.rCenter, transform.rCenter);
+        var _rCenterFn = interpolate(prev.transform.rCenter, transform.rCenter);
         var rCenterFn = function(t) { return _rCenterFn(Math.pow(t, pow)); };
 
         return function(t) {
@@ -476,7 +479,7 @@ function plotOne(gd, cd, element, transitionOpts) {
             var parentChildren = parent.children;
             var ci = parentChildren.indexOf(pt);
             var n = parentChildren.length;
-            var interp = d3.interpolate(parentPrev.x0, parentPrev.x1);
+            var interp = interpolate(parentPrev.x0, parentPrev.x1);
             out.x0 = interp(ci / n);
             out.x1 = interp(ci / n);
         } else {

src/traces/treemap/plot_one.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var d3 = require('@plotly/d3');
+var interpolate = require('d3-interpolate').interpolate;
 
 var helpers = require('../sunburst/helpers');
 
@@ -349,7 +350,7 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
             }
         }
 
-        return d3.interpolate(prev, next);
+        return interpolate(prev, next);
     };
 
     var makeUpdateSliceInterpolator = function(pt, onPathbar, refRect, size, opts) {
@@ -395,7 +396,7 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
             }
         }
 
-        return d3.interpolate(prev, {
+        return interpolate(prev, {
             x0: pt.x0,
             x1: pt.x1,
             y0: pt.y0,
@@ -436,7 +437,7 @@ module.exports = function plotOne(gd, cd, element, transitionOpts, drawDescendan
             recordMinTextSize(trace.type, transform, fullLayout);
         }
 
-        return d3.interpolate(prev, {
+        return interpolate(prev, {
             transform: {
                 scale: transform.scale,
                 rotate: transform.rotate,