Upgrade d3 in plotly.js from v3 to v4

package.json

@@ -69,7 +69,6 @@
     ]
   },
   "dependencies": {
-    "@plotly/d3": "3.8.0",
     "@plotly/d3-sankey": "0.7.2",
     "@plotly/d3-sankey-circular": "0.33.1",
     "@turf/area": "^6.4.0",
@@ -81,6 +80,7 @@
     "color-parse": "1.3.8",
     "color-rgba": "2.1.1",
     "country-regex": "^1.1.0",
+    "d3": "^4.13.0",
     "d3-force": "^1.2.1",
     "d3-format": "^1.4.5",
     "d3-geo": "^1.12.1",

src/components/annotations/draw.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3 = require('../../lib/d3');
 
 var Registry = require('../../registry');
 var Plots = require('../../plots/plots');
@@ -221,13 +221,16 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     var annTextClip = fullLayout._topclips
         .selectAll('#' + annClipID)
-        .data(isSizeConstrained ? [0] : []);
+        .data(isSizeConstrained ? [0] : [])
+        .enter()
+        .append('clipPath');
 
-    annTextClip.enter().append('clipPath')
+    annTextClip.exit().remove();
+
+    annTextClip
         .classed('annclip', true)
         .attr('id', annClipID)
-      .append('rect');
-    annTextClip.exit().remove();
+        .append('rect');
 
     var font = options.font;
 
@@ -241,7 +244,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
 
     function textLayout(s) {
         s.call(Drawing.font, font)
-        .attr({
+        .attrs({
             'text-anchor': {
                 left: 'start',
                 right: 'end'
@@ -256,11 +259,11 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         // if the text has *only* a link, make the whole box into a link
         var anchor3 = annText.selectAll('a');
         if(anchor3.size() === 1 && anchor3.text() === annText.text()) {
-            var wholeLink = annTextGroupInner.insert('a', ':first-child').attr({
+            var wholeLink = annTextGroupInner.insert('a', ':first-child').attrs({
                 'xlink:xlink:href': anchor3.attr('xlink:href'),
                 'xlink:xlink:show': anchor3.attr('xlink:show')
             })
-            .style({cursor: 'pointer'});
+            .styles({cursor: 'pointer'});
 
             wholeLink.node().appendChild(annTextBG.node());
         }
@@ -453,7 +456,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
         }
 
         if(hasMathjax) {
-            mathjaxGroup.select('svg').attr({
+            mathjaxGroup.select('svg').attrs({
                 x: borderfull + xShift - 1,
                 y: borderfull + yShift
             })
@@ -482,7 +485,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
          * because we needed that for autoranging anyway, so now whether
          * we have an arrow or not, we rotate about the text center.
          */
-        annTextGroup.attr({transform: 'rotate(' + textangle + ',' +
+        annTextGroup.attrs({transform: 'rotate(' + textangle + ',' +
                             annPosPx.x.text + ',' + annPosPx.y.text + ')'});
 
         /*
@@ -550,7 +553,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
             var arrowSide = options.arrowside;
 
             var arrowGroup = annGroup.append('g')
-                .style({opacity: Color.opacity(arrowColor)})
+                .styles({opacity: Color.opacity(arrowColor)})
                 .classed('annotation-arrow-g', true);
 
             var arrow = arrowGroup.append('path')
@@ -574,7 +577,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                     .classed('annotation-arrow', true)
                     .classed('anndrag', true)
                     .classed('cursor-move', true)
-                    .attr({
+                    .attrs({
                         d: 'M3,3H-3V-3H3ZM0,0L' + (tailX - arrowDragHeadX) + ',' + (tailY - arrowDragHeadY),
                         transform: strTranslate(arrowDragHeadX, arrowDragHeadY)
                     })
@@ -624,7 +627,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                         }
 
                         arrowGroup.attr('transform', strTranslate(dx, dy));
-                        annTextGroup.attr({
+                        annTextGroup.attrs({
                             transform: 'rotate(' + textangle + ',' +
                                    xcenter + ',' + ycenter + ')'
                         });
@@ -707,7 +710,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) {
                         }
                     } else return;
 
-                    annTextGroup.attr({
+                    annTextGroup.attrs({
                         transform: strTranslate(dx, dy) + baseTextTransform
                     });
 

src/components/annotations/draw_arrow_head.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3 = require('../../lib/d3');
 
 var Color = require('../color');
 
@@ -70,7 +70,7 @@ module.exports = function drawArrowHead(el3, ends, options) {
 
             end.x += backOffX;
             end.y += backOffY;
-            el3.attr({x2: end.x, y2: end.y});
+            el3.attrs({x2: end.x, y2: end.y});
         }
 
         if(startBackOff) {
@@ -83,7 +83,7 @@ module.exports = function drawArrowHead(el3, ends, options) {
 
             start.x -= startBackOffX;
             start.y -= startbackOffY;
-            el3.attr({x1: start.x, y1: start.y});
+            el3.attrs({x1: start.x, y1: start.y});
         }
     } else if(el.nodeName === 'path') {
         var pathlen = el.getTotalLength();
@@ -126,15 +126,15 @@ module.exports = function drawArrowHead(el3, ends, options) {
         if(arrowHeadStyle.noRotate) rot = 0;
 
         d3.select(el.parentNode).append('path')
-            .attr({
+            .attrs({
                 'class': el3.attr('class'),
                 d: arrowHeadStyle.path,
                 transform:
                     strTranslate(p.x, p.y) +
                     strRotate(rot * 180 / Math.PI) +
                     strScale(arrowScale)
             })
-            .style({
+            .styles({
                 fill: Color.rgb(options.arrowcolor),
                 'stroke-width': 0
             });

src/components/color/index.js

@@ -75,12 +75,12 @@ color.contrast = function(cstr, lightAmount, darkAmount) {
 
 color.stroke = function(s, c) {
     var tc = tinycolor(c);
-    s.style({'stroke': color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});
+    s.styles({'stroke': color.tinyRGB(tc), 'stroke-opacity': tc.getAlpha()});
 };
 
 color.fill = function(s, c) {
     var tc = tinycolor(c);
-    s.style({
+    s.styles({
         'fill': color.tinyRGB(tc),
         'fill-opacity': tc.getAlpha()
     });

src/components/colorbar/draw.js

@@ -1,13 +1,14 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3 = require('../../lib/d3');
 var tinycolor = require('tinycolor2');
 
 var Plots = require('../../plots/plots');
 var Registry = require('../../registry');
 var Axes = require('../../plots/cartesian/axes');
 var dragElement = require('../dragelement');
 var Lib = require('../../lib');
+var getTraceFromCd = require('../../lib/trace_from_cd');
 var strTranslate = Lib.strTranslate;
 var extendFlat = require('../../lib/extend').extendFlat;
 var setCursor = require('../../lib/setcursor');
@@ -33,12 +34,20 @@ function draw(gd) {
 
     var colorBars = fullLayout._infolayer
         .selectAll('g.' + cn.colorbar)
-        .data(makeColorBarData(gd), function(opts) { return opts._id; });
+        .data(makeColorBarData(gd), function(opts) { return opts._id; })
+        .enter()
+        .append('g');
 
-    colorBars.enter().append('g')
+    colorBars.exit()
+        .each(function(opts) { Plots.autoMargin(gd, opts._id); })
+        .remove();
+
+    colorBars
         .attr('class', function(opts) { return opts._id; })
         .classed(cn.colorbar, true);
 
+    colorBars.order();
+
     colorBars.each(function(opts) {
         var g = d3.select(this);
 
@@ -56,12 +65,6 @@ function draw(gd) {
             makeEditable(g, opts, gd);
         }
     });
-
-    colorBars.exit()
-        .each(function(opts) { Plots.autoMargin(gd, opts._id); })
-        .remove();
-
-    colorBars.order();
 }
 
 function makeColorBarData(gd) {
@@ -116,7 +119,7 @@ function makeColorBarData(gd) {
 
     for(var i = 0; i < calcdata.length; i++) {
         var cd = calcdata[i];
-        trace = cd[0].trace;
+        trace = getTraceFromCd(cd);
         var moduleOpts = trace._module.colorbar;
 
         if(trace.visible === true && moduleOpts) {
@@ -391,11 +394,15 @@ function drawColorBar(g, opts, gd) {
         var fills = g.select('.' + cn.cbfills)
             .selectAll('rect.' + cn.cbfill)
             .attr('style', '')
-            .data(fillLevels);
-        fills.enter().append('rect')
+            .data(fillLevels)
+            .enter()
+            .append('rect');
+
+        fills.exit().remove();
+
+        fills
             .classed(cn.cbfill, true)
             .style('stroke', 'none');
-        fills.exit().remove();
 
         var zBounds = zrange
             .map(ax.c2p)
@@ -417,7 +424,7 @@ function drawColorBar(g, opts, gd) {
 
             // Colorbar cannot currently support opacities so we
             // use an opaque fill even when alpha channels present
-            var fillEl = d3.select(this).attr({
+            var fillEl = d3.select(this).attrs({
                 x: xLeft,
                 width: Math.max(thickPx, 2),
                 y: d3.min(z),
@@ -436,10 +443,15 @@ function drawColorBar(g, opts, gd) {
 
         var lines = g.select('.' + cn.cblines)
             .selectAll('path.' + cn.cbline)
-            .data(line.color && line.width ? lineLevels : []);
-        lines.enter().append('path')
-            .classed(cn.cbline, true);
+            .data(line.color && line.width ? lineLevels : [])
+            .enter()
+            .append('path');
+
         lines.exit().remove();
+
+        lines
+            .classed(cn.cbline, true);
+
         lines.each(function(d) {
             d3.select(this)
                 .attr('d', 'M' + xLeft + ',' +
@@ -501,7 +513,7 @@ function drawColorBar(g, opts, gd) {
         var outerwidth = 2 * opts.xpad + innerWidth + opts.borderwidth + opts.outlinewidth / 2;
         var outerheight = yBottomPx - yTopPx;
 
-        g.select('.' + cn.cbbg).attr({
+        g.select('.' + cn.cbbg).attrs({
             x: xLeft - opts.xpad - (opts.borderwidth + opts.outlinewidth) / 2,
             y: yTopPx - yExtraPx,
             width: Math.max(outerwidth, 2),
@@ -511,14 +523,14 @@ function drawColorBar(g, opts, gd) {
         .call(Color.stroke, opts.bordercolor)
         .style('stroke-width', opts.borderwidth);
 
-        g.selectAll('.' + cn.cboutline).attr({
+        g.selectAll('.' + cn.cboutline).attrs({
             x: xLeft,
             y: yTopPx + opts.ypad + (titleSide === 'top' ? titleHeight : 0),
             width: Math.max(thickPx, 2),
             height: Math.max(outerheight - 2 * opts.ypad - titleHeight, 2)
         })
         .call(Color.stroke, opts.outlinecolor)
-        .style({
+        .styles({
             fill: 'none',
             'stroke-width': opts.outlinewidth
         });

src/components/colorscale/helpers.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var d3 = require('@plotly/d3');
+var d3 = require('../../lib/d3');
 var tinycolor = require('tinycolor2');
 var isNumeric = require('fast-isnumeric');
 
@@ -169,7 +169,7 @@ function makeColorScaleFunc(specs, opts) {
         _range[i] = [rgba.r, rgba.g, rgba.b, rgba.a];
     }
 
-    var _sclFunc = d3.scale.linear()
+    var _sclFunc = d3.scaleLinear()
         .domain(domain)
         .range(_range)
         .clamp(true);