put main subplot plot inside overplot

Author: archmoj

src/plots/cartesian/index.js

@@ -507,8 +507,9 @@ function makeSubplotLayer(gd, plotinfo) {
             ensureSingle(plotgroup, 'g', 'yaxislayer-below');
             plotinfo.overaxesBelow = ensureSingle(plotgroup, 'g', 'overaxes-below');
 
-            plotinfo.plot = ensureSingle(plotgroup, 'g', 'plot');
+            ensureSingle(plotgroup, 'g', 'plot');
             plotinfo.overplot = ensureSingle(plotgroup, 'g', 'overplot');
+            plotinfo.plot = ensureSingle(plotinfo.overplot, 'g', id);
 
             plotinfo.xlines = ensureSingle(plotgroup, 'path', 'xlines-above');
             plotinfo.ylines = ensureSingle(plotgroup, 'path', 'ylines-above');

test/jasmine/tests/animate_test.js

@@ -1008,7 +1008,7 @@ describe('animating scatter traces', function() {
 
         // assert what Cartesian.transitionAxes does
         function getSubplotTranslate() {
-            var sp = d3Select(gd).select('.subplot.xy > .plot');
+            var sp = d3Select(gd).select('.subplot.xy > .overplot').select('.xy');
             return sp.attr('transform')
                 .split('translate(')[1].split(')')[0]
                 .split(',')

test/jasmine/tests/bar_test.js

@@ -2087,7 +2087,7 @@ describe('A bar plot', function() {
         }
 
         function _assert(layerClips, barDisplays, barTextDisplays, barClips) {
-            var subplotLayer = d3Select('.plot');
+            var subplotLayer = d3Select('.overplot').select('.xy');
             var barLayer = subplotLayer.select('.barlayer');
 
             _assertClip(subplotLayer, layerClips[0], 1, 'subplot layer');

test/jasmine/tests/cartesian_interact_test.js

@@ -1592,7 +1592,7 @@ describe('axis zoom/pan and main plot zoom', function() {
                     [['yaxis'], [-0.318, 3.318]],
                     [['xaxis2', 'yaxis2'], [-0.588, 8.824]]
                 ]);
-                x2y2 = d3Select('.subplot.x2y2 .plot');
+                x2y2 = d3Select('.subplot.x2y2 .overplot').select('.x2y2');
                 expect(x2y2.attr('transform')).toBe('translate(50,50)');
                 mx = gd._fullLayout.xaxis._m;
                 my = gd._fullLayout.yaxis._m;

test/jasmine/tests/cartesian_test.js

@@ -609,7 +609,7 @@ describe('subplot creation / deletion:', function() {
         var fig = Lib.extendDeep({}, require('../../image/mocks/overlaying-axis-lines.json'));
 
         function _assert(xyCnt, x2y2Cnt) {
-            expect(d3Select('.subplot.xy').select('.plot').selectAll('.trace').size())
+            expect(d3Select('.subplot.xy').select('.overplot').select('.xy').selectAll('.trace').size())
                 .toBe(xyCnt, 'has correct xy subplot trace count');
             expect(d3Select('.overplot').select('.x2y2').selectAll('.trace').size())
                 .toBe(x2y2Cnt, 'has correct x2y2 oveylaid subplot trace count');
@@ -759,7 +759,7 @@ describe('subplot creation / deletion:', function() {
             _assert('x2/y2 both overlays', {
                 xtickParent: 'xaxislayer-above',
                 x2tickParent: 'x2y2-x',
-                trace0Parent: 'plot',
+                trace0Parent: 'xy',
                 trace1Parent: 'x2y2'
             });
         })
@@ -770,8 +770,8 @@ describe('subplot creation / deletion:', function() {
             _assert('x2 free / y2 overlaid', {
                 xtickParent: 'xaxislayer-above',
                 x2tickParent: 'xaxislayer-above',
-                trace0Parent: 'plot',
-                trace1Parent: 'plot'
+                trace0Parent: 'xy',
+                trace1Parent: 'x2y2'
             });
         })
         .then(function() {
@@ -781,7 +781,7 @@ describe('subplot creation / deletion:', function() {
             _assert('back to x2/y2 both overlays', {
                 xtickParent: 'xaxislayer-above',
                 x2tickParent: 'x2y2-x',
-                trace0Parent: 'plot',
+                trace0Parent: 'xy',
                 trace1Parent: 'x2y2'
             });
         })

test/jasmine/tests/click_test.js

@@ -1182,14 +1182,14 @@ describe('dragbox', function() {
             var pos = getRectCenter(node);
             var fns = drag.makeFns({pos0: pos, dpos: [50, 0]});
 
-            assertScale(d3Select('.plot').node(), 1, 1);
+            assertScale(d3Select('.overplot').select('.xy').node(), 1, 1);
 
             d3SelectAll('.point').each(function() {
                 assertScale(this, 1, 1);
             });
 
             fns.start().then(function() {
-                assertScale(d3Select('.plot').node(), 1.14, 1);
+                assertScale(d3Select('.overplot').select('.xy').node(), 1.14, 1);
 
                 d3Select('.scatterlayer').selectAll('.point').each(function() {
                     assertScale(this, 0.87, 1);

test/jasmine/tests/scatter_test.js

@@ -2053,7 +2053,7 @@ describe('Test scatter *clipnaxis*:', function() {
         }
 
         function _assert(layerClips, nodeDisplays, errorBarClips, lineClips) {
-            var subplotLayer = d3Select('.plot');
+            var subplotLayer = d3Select('.overplot').select('.xy');
             var scatterLayer = subplotLayer.select('.scatterlayer');
 
             _assertClip(subplotLayer, layerClips[0], 1, 'subplot layer');

test/jasmine/tests/select_test.js

@@ -3112,7 +3112,7 @@ describe('Test select box and lasso per trace:', function() {
             var assertSelectedPoints = makeAssertSelectedPoints();
 
             function assertFillOpacity(exp, msg) {
-                var txtPts = d3Select(gd).select('g.plot').selectAll('text');
+                var txtPts = d3Select(gd).select('g.overplot').select('.xy').selectAll('text');
 
                 expect(txtPts.size()).toBe(exp.length, '# of text nodes: ' + msg);
 

test/jasmine/tests/toimage_test.js

@@ -240,7 +240,10 @@ describe('Plotly.toImage', function() {
         })
         .then(function(svg) {
             var svgDOM = parser.parseFromString(svg, 'image/svg+xml');
-            var gSubplot = svgDOM.getElementsByClassName('plot')[0];
+            var gSubplot = svgDOM
+                .getElementsByClassName('overplot')[0]
+                .getElementsByClassName('xy')[0];
+
             var clipPath = gSubplot.getAttribute('clip-path');
             var len = clipPath.length;