bring back d3-esque method chains

... even though don't look bad to etpinard's 👀

src/components/colorbar/draw.js

@@ -246,18 +246,18 @@ module.exports = function draw(gd, id) {
 
         // now draw the elements
         var container = Lib.ensureSingle(fullLayout._infolayer, 'g', id, function(s) {
-            s.classed(cn.colorbar, true);
-            s.each(function() {
-                var s = d3.select(this);
-                s.append('rect').classed(cn.cbbg, true);
-                s.append('g').classed(cn.cbfills, true);
-                s.append('g').classed(cn.cblines, true);
-                s.append('g').classed(cn.cbaxis, true).classed(cn.crisp, true);
-                s.append('g').classed(cn.cbtitleunshift, true)
-                    .append('g').classed(cn.cbtitle, true);
-                s.append('rect').classed(cn.cboutline, true);
-                s.select('.cbtitle').datum(0);
-            });
+            s.classed(cn.colorbar, true)
+                .each(function() {
+                    var s = d3.select(this);
+                    s.append('rect').classed(cn.cbbg, true);
+                    s.append('g').classed(cn.cbfills, true);
+                    s.append('g').classed(cn.cblines, true);
+                    s.append('g').classed(cn.cbaxis, true).classed(cn.crisp, true);
+                    s.append('g').classed(cn.cbtitleunshift, true)
+                        .append('g').classed(cn.cbtitle, true);
+                    s.append('rect').classed(cn.cboutline, true);
+                    s.select('.cbtitle').datum(0);
+                });
         });
 
         container.attr('transform', 'translate(' + Math.round(gs.l) +

src/components/drawing/index.js

@@ -728,26 +728,26 @@ drawing.steps = function(shape) {
 // uses the id 'js-plotly-tester' and stores it in drawing.tester
 drawing.makeTester = function() {
     var tester = Lib.ensureSingleById(d3.select('body'), 'svg', 'js-plotly-tester', function(s) {
-        s.attr(xmlnsNamespaces.svgAttrs);
-        s.style({
-            position: 'absolute',
-            left: '-10000px',
-            top: '-10000px',
-            width: '9000px',
-            height: '9000px',
-            'z-index': '1'
-        });
+        s.attr(xmlnsNamespaces.svgAttrs)
+            .style({
+                position: 'absolute',
+                left: '-10000px',
+                top: '-10000px',
+                width: '9000px',
+                height: '9000px',
+                'z-index': '1'
+            });
     });
 
     // browsers differ on how they describe the bounding rect of
     // the svg if its contents spill over... so make a 1x1px
     // reference point we can measure off of.
     var testref = Lib.ensureSingle(tester, 'path', 'js-reference-point', function(s) {
-        s.attr('d', 'M0,0H1V1H0Z');
-        s.style({
-            'stroke-width': 0,
-            fill: 'black'
-        });
+        s.attr('d', 'M0,0H1V1H0Z')
+            .style({
+                'stroke-width': 0,
+                fill: 'black'
+            });
     });
 
     drawing.tester = tester;

src/components/legend/draw.js

@@ -79,8 +79,8 @@ module.exports = function draw(gd) {
             ry: 3,
             width: 0,
             height: 0
-        });
-        s.call(Color.fill, '#808BA4');
+        })
+        .call(Color.fill, '#808BA4');
     });
 
     var groups = scrollBox.selectAll('g.groups')
@@ -426,9 +426,9 @@ function setupTraceToggle(g, gd) {
         numClicks = 1;
 
     var traceToggle = Lib.ensureSingle(g, 'rect', 'legendtoggle', function(s) {
-        s.style('cursor', 'pointer');
-        s.attr('pointer-events', 'all');
-        s.call(Color.fill, 'rgba(0,0,0,0)');
+        s.style('cursor', 'pointer')
+            .attr('pointer-events', 'all')
+            .call(Color.fill, 'rgba(0,0,0,0)');
     });
 
     traceToggle.on('mousedown', function() {

src/components/rangeselector/draw.js

@@ -148,8 +148,8 @@ function drawButtonText(button, selectorLayout, d, gd) {
     }
 
     var text = Lib.ensureSingle(button, 'text', 'selector-text', function(s) {
-        s.classed('user-select-none', true);
-        s.attr('text-anchor', 'middle');
+        s.classed('user-select-none', true)
+            .attr('text-anchor', 'middle');
     });
 
     text.call(Drawing.font, selectorLayout.font)

src/components/rangeslider/draw.js

@@ -485,17 +485,22 @@ function filterRangePlotCalcData(calcData, subplotId) {
 
 function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisRangeOpts) {
     var maskMin = Lib.ensureSingle(rangeSlider, 'rect', constants.maskMinClassName, function(s) {
-        s.attr({ x: 0, y: 0 });
-        s.attr('shape-rendering', 'crispEdges');
+        s.attr({
+            x: 0,
+            y: 0,
+            'shape-rendering': 'crispEdges'
+        });
     });
 
     maskMin
         .attr('height', opts._height)
         .call(Color.fill, constants.maskColor);
 
     var maskMax = Lib.ensureSingle(rangeSlider, 'rect', constants.maskMaxClassName, function(s) {
-        s.attr('y', 0);
-        s.attr('shape-rendering', 'crispEdges');
+        s.attr({
+            y: 0,
+            'shape-rendering': 'crispEdges'
+        });
     });
 
     maskMax
@@ -505,17 +510,21 @@ function drawMasks(rangeSlider, gd, axisOpts, opts, oppAxisRangeOpts) {
     // masks used for oppAxis zoom
     if(oppAxisRangeOpts.rangemode !== 'match') {
         var maskMinOppAxis = Lib.ensureSingle(rangeSlider, 'rect', constants.maskMinOppAxisClassName, function(s) {
-            s.attr('y', 0);
-            s.attr('shape-rendering', 'crispEdges');
+            s.attr({
+                y: 0,
+                'shape-rendering': 'crispEdges'
+            });
         });
 
         maskMinOppAxis
             .attr('width', opts._width)
             .call(Color.fill, constants.maskOppAxisColor);
 
         var maskMaxOppAxis = Lib.ensureSingle(rangeSlider, 'rect', constants.maskMaxOppAxisClassName, function(s) {
-            s.attr('y', 0);
-            s.attr('shape-rendering', 'crispEdges');
+            s.attr({
+                y: 0,
+                'shape-rendering': 'crispEdges'
+            });
         });
 
         maskMaxOppAxis
@@ -529,9 +538,11 @@ function drawSlideBox(rangeSlider, gd, axisOpts, opts) {
     if(gd._context.staticPlot) return;
 
     var slideBox = Lib.ensureSingle(rangeSlider, 'rect', constants.slideBoxClassName, function(s) {
-        s.attr('y', 0);
-        s.attr('cursor', constants.slideBoxCursor);
-        s.attr('shape-rendering', 'crispEdges');
+        s.attr({
+            y: 0,
+            cursor: constants.slideBoxCursor,
+            'shape-rendering': 'crispEdges'
+        });
     });
 
     slideBox.attr({

src/components/sliders/draw.js

@@ -284,11 +284,11 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
     }
 
     var text = Lib.ensureSingle(sliderGroup, 'text', constants.labelClass, function(s) {
-        s.classed('user-select-none', true);
-        s.attr({
-            'text-anchor': textAnchor,
-            'data-notex': 1
-        });
+        s.classed('user-select-none', true)
+            .attr({
+                'text-anchor': textAnchor,
+                'data-notex': 1
+            });
     });
 
     var str = sliderOpts.currentvalue.prefix ? sliderOpts.currentvalue.prefix : '';
@@ -320,8 +320,8 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
 
 function drawGrip(sliderGroup, gd, sliderOpts) {
     var grip = Lib.ensureSingle(sliderGroup, 'rect', constants.gripRectClass, function(s) {
-        s.call(attachGripEvents, gd, sliderGroup, sliderOpts);
-        s.style('pointer-events', 'all');
+        s.call(attachGripEvents, gd, sliderGroup, sliderOpts)
+            .style('pointer-events', 'all');
     });
 
     grip.attr({
@@ -337,11 +337,11 @@ function drawGrip(sliderGroup, gd, sliderOpts) {
 
 function drawLabel(item, data, sliderOpts) {
     var text = Lib.ensureSingle(item, 'text', constants.labelClass, function(s) {
-        s.classed('user-select-none', true);
-        s.attr({
-            'text-anchor': 'middle',
-            'data-notex': 1
-        });
+        s.classed('user-select-none', true)
+            .attr({
+                'text-anchor': 'middle',
+                'data-notex': 1
+            });
     });
 
     text.call(Drawing.font, sliderOpts.font)
@@ -559,8 +559,8 @@ function positionToNormalizedValue(sliderOpts, position) {
 function drawTouchRect(sliderGroup, gd, sliderOpts) {
     var dims = sliderOpts._dims;
     var rect = Lib.ensureSingle(sliderGroup, 'rect', constants.railTouchRectClass, function(s) {
-        s.call(attachGripEvents, gd, sliderGroup, sliderOpts);
-        s.style('pointer-events', 'all');
+        s.call(attachGripEvents, gd, sliderGroup, sliderOpts)
+            .style('pointer-events', 'all');
     });
 
     rect.attr({

src/components/updatemenus/draw.js

@@ -454,11 +454,11 @@ function drawItemRect(item, menuOpts) {
 
 function drawItemText(item, menuOpts, itemOpts, gd) {
     var text = Lib.ensureSingle(item, 'text', constants.itemTextClassName, function(s) {
-        s.classed('user-select-none', true);
-        s.attr({
-            'text-anchor': 'start',
-            'data-notex': 1
-        });
+        s.classed('user-select-none', true)
+            .attr({
+                'text-anchor': 'start',
+                'data-notex': 1
+            });
     });
 
     text.call(Drawing.font, menuOpts.font)

src/plot_api/subroutines.js

@@ -183,8 +183,8 @@ exports.lsInner = function(gd) {
         var clipId = plotinfo.clipId = 'clip' + fullLayout._uid + subplot + 'plot';
 
         var plotClip = Lib.ensureSingleById(fullLayout._clips, 'clipPath', clipId, function(s) {
-            s.classed('plotclip', true);
-            s.append('rect');
+            s.classed('plotclip', true)
+                .append('rect');
         });
 
         plotClip.select('rect').attr({

src/plots/ternary/ternary.js

@@ -75,12 +75,14 @@ proto.makeFramework = function(fullLayout) {
     var clipIdRelative = _this.clipIdRelative = 'clip-relative' + _this.layoutId + _this.id;
 
     // clippath for this ternary subplot
-    _this.clipDef = Lib.ensureSingleById(fullLayout._clips, 'clipPath', clipId);
-    _this.clipDef.append('path').attr('d', 'M0,0Z');
+    _this.clipDef = Lib.ensureSingleById(fullLayout._clips, 'clipPath', clipId, function(s) {
+        s.append('path').attr('d', 'M0,0Z');
+    });
 
     // 'relative' clippath (i.e. no translation) for this ternary subplot
-    _this.clipDefRelative = Lib.ensureSingleById(fullLayout._clips, 'clipPath', clipIdRelative);
-    _this.clipDefRelative.append('path').attr('d', 'M0,0Z');
+    _this.clipDefRelative = Lib.ensureSingleById(fullLayout._clips, 'clipPath', clipIdRelative, function(s) {
+        s.clipDefRelative.append('path').attr('d', 'M0,0Z');
+    });
 
     // container for everything in this ternary subplot
     _this.plotContainer = Lib.ensureSingle(_this.container, 'g', _this.id);