sub plots enter and exit adjustment

plotly · archmoj · Jul 17, 2021 · Jul 17, 2021 · Jul 14, 2021 · Jul 14, 2021
commit 6654f6eec286dfad569ae4fe8c0033f38a4b6241
diff --git a/src/plots/cartesian/axes.js b/src/plots/cartesian/axes.js
@@ -1902,14 +1902,16 @@ axes.makeClipPaths = function(gd) {
    // have to use class instead
    // https://groups.google.com/forum/#!topic/d3-js/6EpAzQ2gU9I
    var axClips = fullLayout._clips.selectAll('.axesclip')
-        .data(clipList, function(d) { return d.x._id + d.y._id; });
+        .data(clipList, function(d) { return d.x._id + d.y._id; })
+        .enter()
+        .append('clipPath');

-    axClips.enter().append('clipPath')
+    axClips.exit().remove();
+
+    axClips
        .classed('axesclip', true)
        .attr('id', function(d) { return 'clip' + fullLayout._uid + d.x._id + d.y._id; })
-      .append('rect');
-
-    axClips.exit().remove();
+        .append('rect');

    axClips.each(function(d) {
        d3.select(this).select('rect').attrs({
@@ -2801,11 +2803,13 @@ axes.drawTicks = function(gd, ax, opts) {
    }

    var ticks = opts.layer.selectAll('path.' + cls)
-        .data(ax.ticks ? vals : [], tickDataFn);
+        .data(ax.ticks ? vals : [], tickDataFn)
+        .enter()
+        .append('path');

    ticks.exit().remove();

-    ticks.enter().append('path')
+    ticks
        .classed(cls, 1)
        .classed('ticks', 1)
        .classed('crisp', opts.crisp !== false)
@@ -2864,11 +2868,13 @@ axes.drawGrid = function(gd, ax, opts) {
    }

    var grid = opts.layer.selectAll('path.' + cls)
-        .data(vals, tickDataFn);
+        .data(vals, tickDataFn)
+        .enter()
+        .append('path');

    grid.exit().remove();

-    grid.enter().append('path')
+    grid
        .classed(cls, 1)
        .classed('crisp', opts.crisp !== false);

@@ -2883,6 +2889,8 @@ axes.drawGrid = function(gd, ax, opts) {
    hideCounterAxisInsideTickLabels(ax, [GRID_PATH]);

    if(typeof opts.path === 'function') grid.attr('d', opts.path);
+
+
 };

 /**
@@ -2909,11 +2917,13 @@ axes.drawZeroLine = function(gd, ax, opts) {
    var show = axes.shouldShowZeroLine(gd, ax, opts.counterAxis);

    var zl = opts.layer.selectAll('path.' + cls)
-        .data(show ? [{x: 0, id: ax._id}] : []);
+        .data(show ? [{x: 0, id: ax._id}] : [])
+        .enter()
+        .append('path');

    zl.exit().remove();

-    zl.enter().append('path')
+    zl
        .classed(cls, 1)
        .classed('zl', 1)
        .classed('crisp', opts.crisp !== false)
@@ -2924,9 +2934,8 @@ axes.drawZeroLine = function(gd, ax, opts) {
            opts.layer.selectAll('path').sort(function(da, db) {
                return idSort(da.id, db.id);
            });
-        });
-
-    zl.attr('transform', opts.transFn)
+        })
+        .attr('transform', opts.transFn)
        .attr('d', opts.path)
        .call(Color.stroke, ax.zerolinecolor || Color.defaultLine)
        .style('stroke-width', Drawing.crispRound(gd, ax.zerolinewidth, ax._gw || 1) + 'px')
@@ -2972,45 +2981,47 @@ axes.drawLabels = function(gd, ax, opts) {
    var tickAngle = opts.secondary ? 0 : ax.tickangle;
    var prevAngle = (ax._prevTickAngles || {})[cls];

+    var labelsReady = [];
+
    var tickLabels = opts.layer.selectAll('g.' + cls)
-        .data(ax.showticklabels ? vals : [], tickDataFn);
+        .data(ax.showticklabels ? vals : [], tickDataFn)
+        .enter()
+        .append('g');

-    var labelsReady = [];
+    tickLabels.exit().remove();

-    tickLabels.enter().append('g')
+    tickLabels
        .classed(cls, 1)
        .append('text')
-            // only so tex has predictable alignment that we can
-            // alter later
-            .attr('text-anchor', 'middle')
-            .each(function(d) {
-                var thisLabel = d3.select(this);
-                var newPromise = gd._promises.length;
-
-                thisLabel
-                    .call(svgTextUtils.positionText, labelFns.xFn(d), labelFns.yFn(d))
-                    .call(Drawing.font, d.font, d.fontSize, d.fontColor)
-                    .text(d.text)
-                    .call(svgTextUtils.convertToTspans, gd);
-
-                if(gd._promises[newPromise]) {
-                    // if we have an async label, we'll deal with that
-                    // all here so take it out of gd._promises and
-                    // instead position the label and promise this in
-                    // labelsReady
-                    labelsReady.push(gd._promises.pop().then(function() {
-                        positionLabels(thisLabel, tickAngle);
-                    }));
-                } else {
-                    // sync label: just position it now.
+        // only so tex has predictable alignment that we can
+        // alter later
+        .attr('text-anchor', 'middle')
+        .each(function(d) {
+            var thisLabel = d3.select(this);
+            var newPromise = gd._promises.length;
+
+            thisLabel
+                .call(svgTextUtils.positionText, labelFns.xFn(d), labelFns.yFn(d))
+                .call(Drawing.font, d.font, d.fontSize, d.fontColor)
+                .text(d.text)
+                .call(svgTextUtils.convertToTspans, gd);
+
+            if(gd._promises[newPromise]) {
+                // if we have an async label, we'll deal with that
+                // all here so take it out of gd._promises and
+                // instead position the label and promise this in
+                // labelsReady
+                labelsReady.push(gd._promises.pop().then(function() {
                    positionLabels(thisLabel, tickAngle);
-                }
-            });
+                }));
+            } else {
+                // sync label: just position it now.
+                positionLabels(thisLabel, tickAngle);
+            }
+        });

    hideCounterAxisInsideTickLabels(ax, [TICK_TEXT]);

-    tickLabels.exit().remove();
-
    if(opts.repositionOnUpdate) {
        tickLabels.each(function(d) {
            d3.select(this).select('text')
@@ -3362,17 +3373,17 @@ function drawDividers(gd, ax, opts) {
    var vals = opts.vals;

    var dividers = opts.layer.selectAll('path.' + cls)
-        .data(vals, tickDataFn);
+        .data(vals, tickDataFn)
+        .enter()
+        .insert('path', ':first-child');

    dividers.exit().remove();

-    dividers.enter().insert('path', ':first-child')
+    dividers
        .classed(cls, 1)
        .classed('crisp', 1)
        .call(Color.stroke, ax.dividercolor)
-        .style('stroke-width', Drawing.crispRound(gd, ax.dividerwidth, 1) + 'px');
-
-    dividers
+        .style('stroke-width', Drawing.crispRound(gd, ax.dividerwidth, 1) + 'px')
        .attr('transform', opts.transFn)
        .attr('d', opts.path);
 }

diff --git a/src/plots/cartesian/index.js b/src/plots/cartesian/index.js
@@ -226,15 +226,17 @@ function plotOne(gd, plotinfo, cdSubplot, transitionOpts, makeOnCompleteCallback
    layerData.sort(function(a, b) { return a.i - b.i; });

    var layers = plotinfo.plot.selectAll('g.mlayer')
-        .data(layerData, function(d) { return d.className; });
+        .data(layerData, function(d) { return d.className; })
+        .enter()
+        .append('g');

-    layers.enter().append('g')
+    layers.exit().remove();
+
+    layers
        .attr('class', function(d) { return d.className; })
        .classed('mlayer', true)
        .classed('rangeplot', plotinfo.isRangePlot);

-    layers.exit().remove();
-
    layers.order();

    layers.each(function(d) {
@@ -346,28 +348,27 @@ exports.drawFramework = function(gd) {
    var subplotData = makeSubplotData(gd);

    var subplotLayers = fullLayout._cartesianlayer.selectAll('.subplot')
-        .data(subplotData, String);
-
-    subplotLayers.enter().append('g')
-        .attr('class', function(d) { return 'subplot ' + d[0]; });
-
-    subplotLayers.order();
-
-    subplotLayers.exit()
-        .call(purgeSubplotLayers, fullLayout);
-
-    subplotLayers.each(function(d) {
-        var id = d[0];
-        var plotinfo = fullLayout._plots[id];
-
-        plotinfo.plotgroup = d3.select(this);
-        makeSubplotLayer(gd, plotinfo);
-
-        // make separate drag layers for each subplot,
-        // but append them to paper rather than the plot groups,
-        // so they end up on top of the rest
-        plotinfo.draglayer = ensureSingle(fullLayout._draggers, 'g', id);
-    });
+        .data(subplotData, String)
+        .enter()
+        .append('g');
+
+    subplotLayers.exit().call(purgeSubplotLayers, fullLayout);
+
+    subplotLayers
+        .attr('class', function(d) { return 'subplot ' + d[0]; })
+        .order()
+        .each(function(d) {
+            var id = d[0];
+            var plotinfo = fullLayout._plots[id];
+
+            plotinfo.plotgroup = d3.select(this);
+            makeSubplotLayer(gd, plotinfo);
+
+            // make separate drag layers for each subplot,
+            // but append them to paper rather than the plot groups,
+            // so they end up on top of the rest
+            plotinfo.draglayer = ensureSingle(fullLayout._draggers, 'g', id);
+        });
 };

 exports.rangePlot = function(gd, plotinfo, cdSubplot) {
@@ -528,7 +529,8 @@ function makeSubplotLayer(gd, plotinfo) {
        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.xaxis._id);
        ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.yaxis._id);
        plotinfo.gridlayer.selectAll('g')
-            .map(function(d) { return d[0]; })
+            .nodes()
+            .map(function(e) { return e.className.baseVal; })
            .sort(axisIds.idSort);
    }


diff --git a/src/plots/cartesian/select.js b/src/plots/cartesian/select.js
@@ -84,11 +84,15 @@ function prepSelect(e, startX, startY, dragOptions, mode) {
        filterPoly = filteredPolygon([[x0, y0]], constants.BENDPX);
    }

-    var outlines = zoomLayer.selectAll('path.select-outline-' + plotinfo.id).data(isDrawMode ? [0] : [1, 2]);
    var drwStyle = fullLayout.newshape;
+    var outlines = zoomLayer.selectAll('path.select-outline-' + plotinfo.id)
+        .data(isDrawMode ? [0] : [1, 2])
+        .enter()
+        .append('path');

-    outlines.enter()
-        .append('path')
+    outlines.exit().remove();
+
+    outlines
        .attr('class', function(d) { return 'select-outline select-outline-' + d + ' select-outline-' + plotinfo.id; })
        .style(isDrawMode ? {
            opacity: drwStyle.opacity / 2,

diff --git a/src/plots/geo/geo.js b/src/plots/geo/geo.js
@@ -319,15 +319,17 @@ proto.updateBaseLayers = function(fullLayout, geoLayout) {
    });

    var join = _this.framework.selectAll('.layer')
-        .data(layerData, String);
+        .data(layerData, String)
+        .enter()
+        .append('g');

    join.exit().each(function(d) {
        delete layers[d];
        delete basePaths[d];
        d3.select(this).remove();
    });

-    join.enter().append('g')
+    join
        .attr('class', function(d) { return 'layer ' + d; })
        .each(function(d) {
            var layer = layers[d] = d3.select(this);

diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -162,7 +162,7 @@ plots.addLinks = function(gd) {
        attrs.x = fullLayout._paper.attr('width') - 7;
    }

-    linkContainer.attr(attrs);
+    linkContainer.attrs(attrs);

    var toolspan = linkContainer.select('.js-link-to-tool');
    var spacespan = linkContainer.select('.js-link-spacer');

diff --git a/src/plots/polar/polar.js b/src/plots/polar/polar.js
@@ -114,9 +114,13 @@ proto.updateLayers = function(fullLayout, polarLayout) {
    if(!isRadialAxisBelowTraces) layerData.push('radial-axis');

    var join = _this.framework.selectAll('.polarsublayer')
-        .data(layerData, String);
+        .data(layerData, String)
+        .enter()
+        .append('g');

-    join.enter().append('g')
+    join.exit().remove();
+
+    join
        .attr('class', function(d) { return 'polarsublayer ' + d;})
        .each(function(d) {
            var sel = layers[d] = d3.select(this);
@@ -1427,7 +1431,7 @@ function snapToVertexAngle(a, vangles) {
 function updateElement(sel, showAttr, attrs) {
    if(showAttr) {
        sel.attr('display', null);
-        sel.attr(attrs);
+        sel.attrs(attrs);
    } else if(sel) {
        sel.attr('display', 'none');
    }

diff --git a/src/plots/ternary/ternary.js b/src/plots/ternary/ternary.js
@@ -129,11 +129,15 @@ proto.updateLayers = function(ternaryLayout) {
    }

    var toplevel = _this.plotContainer.selectAll('g.toplevel')
-        .data(plotLayers, String);
+        .data(plotLayers, String)
+        .enter()
+        .append('g');
+
+    toplevel.exit().remove();

    var grids = ['agrid', 'bgrid', 'cgrid'];

-    toplevel.enter().append('g')
+    toplevel
        .attr('class', function(d) { return 'toplevel ' + d; })
        .each(function(d) {
            var s = d3.select(this);