From 33eac121956923eca5e49f09a408c59d012697c3 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 13 Jul 2021 15:38:47 -0400 Subject: [PATCH 1/3] switch to use d3-interpolate instead of d3.interpolate --- src/traces/indicator/plot.js | 10 ++++++---- src/traces/parcats/parcats.js | 3 ++- src/traces/sunburst/plot.js | 23 ++++++++++++----------- src/traces/treemap/plot_one.js | 7 ++++--- 4 files changed, 24 insertions(+), 19 deletions(-) diff --git a/src/traces/indicator/plot.js b/src/traces/indicator/plot.js index 759d182384b..88b9d5019b1 100644 --- a/src/traces/indicator/plot.js +++ b/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))(); }; }; } diff --git a/src/traces/parcats/parcats.js b/src/traces/parcats/parcats.js index 15f84b8bcb3..357b199080f 100644 --- a/src/traces/parcats/parcats.js +++ b/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)); } diff --git a/src/traces/sunburst/plot.js b/src/traces/sunburst/plot.js index 396c5938f04..4efff7265b4 100644 --- a/src/traces/sunburst/plot.js +++ b/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'); @@ -326,14 +327,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 +373,7 @@ function plotOne(gd, cd, element, transitionOpts) { } } - return d3.interpolate(prev, next); + return interpolate(prev, next); } function makeUpdateTextInterpolator(pt) { @@ -419,19 +420,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 +477,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 { diff --git a/src/traces/treemap/plot_one.js b/src/traces/treemap/plot_one.js index 55de51c8302..cc244fce43f 100644 --- a/src/traces/treemap/plot_one.js +++ b/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, From 47d157f68e6d12f3a6d19e14fc92269ffad1109d Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 13 Jul 2021 18:25:49 -0400 Subject: [PATCH 2/3] fix sunburst tweening to work with new d3-interpolate --- src/traces/sunburst/plot.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/traces/sunburst/plot.js b/src/traces/sunburst/plot.js index 4efff7265b4..bcbddfbe4e8 100644 --- a/src/traces/sunburst/plot.js +++ b/src/traces/sunburst/plot.js @@ -308,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) From c95fdc319e2ff80143d9a1a311d1280cda02aa00 Mon Sep 17 00:00:00 2001 From: archmoj Date: Tue, 13 Jul 2021 23:31:52 -0400 Subject: [PATCH 3/3] draft log for PR 5826 --- draftlogs/5826_change.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/5826_change.md diff --git a/draftlogs/5826_change.md b/draftlogs/5826_change.md new file mode 100644 index 00000000000..9c3743b080f --- /dev/null +++ b/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)]