robustify top-paper <defs>:

- append <defs> to toppaper in make-framework step
- use fullLayout._uid in legend <clipPath> id to avoid
  conflict on DOM queries.

Author: etpinard

src/components/legend/constants.js

@@ -12,7 +12,5 @@ module.exports = {
     scrollBarWidth: 4,
     scrollBarHeight: 20,
     scrollBarColor: '#808BA4',
-    scrollBarMargin: 4,
-
-    clipId: 'legend'
+    scrollBarMargin: 4
 };

src/components/legend/draw.js

@@ -27,6 +27,7 @@ var anchorUtils = require('./anchor_utils');
 
 module.exports = function draw(gd) {
     var fullLayout = gd._fullLayout;
+    var clipId = 'legend' + fullLayout._uid;
 
     if(!fullLayout._infolayer || !gd.calcdata) return;
 
@@ -36,6 +37,8 @@ module.exports = function draw(gd) {
 
     if(!fullLayout.showlegend || !legendData.length) {
         fullLayout._infolayer.selectAll('.legend').remove();
+        fullLayout._topdefs.select('#' + clipId).remove();
+
         Plots.autoMargin(gd, 'legend');
         return;
     }
@@ -52,6 +55,12 @@ module.exports = function draw(gd) {
             'pointer-events': 'all'
         });
 
+    var clipPath = fullLayout._topdefs.selectAll('#' + clipId)
+        .data([0])
+      .enter().append('clipPath')
+        .attr('id', clipId)
+        .append('rect');
+
     var bg = legend.selectAll('rect.bg')
         .data([0]);
 
@@ -201,16 +210,14 @@ module.exports = function draw(gd) {
 
     legend.attr('transform', 'translate(' + lx + ',' + ly + ')');
 
-    var clipPath = selectClipPath(gd);
-
     clipPath.attr({
         width: opts.width,
         height: scrollheight,
         x: 0,
         y: 0
     });
 
-    legend.call(Drawing.setClipUrl, constants.clipId);
+    legend.call(Drawing.setClipUrl, clipId);
 
     // If scrollbar should be shown.
     if(gd.firstRender && opts.height - scrollheight > 0 && !gd._context.staticPlot) {
@@ -470,21 +477,3 @@ function repositionLegend(gd, traces) {
         t: opts.height * ({bottom: 1, middle: 0.5}[yanchor] || 0)
     });
 }
-
-function selectClipPath(gd) {
-    var container = gd._fullLayout._infolayer.node().parentNode;
-
-    var defs = d3.select(container).selectAll('defs')
-        .data([0]);
-
-    defs.enter().append('defs');
-
-    var clipPath = defs.selectAll('#' + constants.clipId)
-        .data([0]);
-
-    var path = clipPath.enter().append('clipPath')
-        .attr('id', constants.clipId)
-        .append('rect');
-
-    return path;
-}

src/plot_api/plot_api.js

@@ -2585,6 +2585,9 @@ function makePlotFramework(gd) {
     fullLayout._defs = fullLayout._paper.append('defs')
         .attr('id', 'defs-' + fullLayout._uid);
 
+    fullLayout._topdefs = fullLayout._toppaper.append('defs')
+        .attr('id', 'defs-' + fullLayout._uid);
+
     fullLayout._draggers = fullLayout._paper.append('g')
         .classed('draglayer', true);