fixes #1873 - apply transform on <clipPath> child

- instead of on <clipPath> element itself
- see https://codepen.io/etpinard/pen/eRbxrp for more info
  on the problem
- lock down this rule by adding condition in strict-d3.js

Author: etpinard

src/plots/cartesian/dragbox.js

@@ -743,7 +743,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
             var plotDx = xa2._offset - clipDx / xScaleFactor2,
                 plotDy = ya2._offset - clipDy / yScaleFactor2;
 
-            fullLayout._defs.selectAll('#' + subplot.clipId)
+            fullLayout._defs.select('#' + subplot.clipId + '> rect')
                 .call(Drawing.setTranslate, clipDx, clipDy)
                 .call(Drawing.setScale, xScaleFactor2, yScaleFactor2);
 

src/plots/cartesian/transition_axes.js

@@ -137,7 +137,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
         var xa2 = subplot.xaxis;
         var ya2 = subplot.yaxis;
 
-        fullLayout._defs.selectAll('#' + subplot.clipId)
+        fullLayout._defs.select('#' + subplot.clipId + '> rect')
             .call(Drawing.setTranslate, 0, 0)
             .call(Drawing.setScale, 1, 1);
 
@@ -221,7 +221,7 @@ module.exports = function transitionAxes(gd, newLayout, transitionOpts, makeOnCo
         var plotDx = xa2._offset - fracDx,
             plotDy = ya2._offset - fracDy;
 
-        fullLayout._defs.selectAll('#' + subplot.clipId)
+        fullLayout._defs.select('#' + subplot.clipId + '> rect')
             .call(Drawing.setTranslate, clipDx, clipDy)
             .call(Drawing.setScale, 1 / xScaleFactor, 1 / yScaleFactor);
 

src/plots/ternary/ternary.js

@@ -292,7 +292,7 @@ proto.adjustLayout = function(ternaryLayout, graphSize) {
     _this.plotContainer.selectAll('.scatterlayer,.maplayer')
         .attr('transform', plotTransform);
 
-    _this.clipDefRelative.attr('transform', null);
+    _this.clipDefRelative.select('path').attr('transform', null);
 
     // TODO: shift axes to accommodate linewidth*sin(30) tick mark angle
 
@@ -619,7 +619,7 @@ proto.initInteractions = function() {
             .attr('transform', plotTransform);
 
         var plotTransform2 = 'translate(' + -dx + ',' + -dy + ')';
-        _this.clipDefRelative.attr('transform', plotTransform2);
+        _this.clipDefRelative.select('path').attr('transform', plotTransform2);
 
         // move the ticks
         _this.aaxis.range = [mins.a, _this.sum - mins.b - mins.c];

test/image/strict-d3.js

@@ -8,8 +8,24 @@ var d3 = require('d3');
 var isNumeric = require('fast-isnumeric');
 
 var selProto = d3.selection.prototype;
+var originalSelAttr = selProto.attr;
 var originalSelStyle = selProto.style;
 
+selProto.attr = function() {
+    var sel = this;
+    var obj = arguments[0];
+
+    if(sel.size()) {
+        if(typeof obj === 'string') {
+            checkAttrVal(sel, obj, arguments[1]);
+        } else {
+            Object.keys(obj).forEach(function(key) { checkAttrVal(sel, key, obj[key]); });
+        }
+    }
+
+    return originalSelAttr.apply(sel, arguments);
+};
+
 selProto.style = function() {
     var sel = this;
     var obj = arguments[0];
@@ -25,6 +41,14 @@ selProto.style = function() {
     return originalSelStyle.apply(sel, arguments);
 };
 
+function checkAttrVal(sel, key) {
+    // setting the transform attribute on a <clipPath> does not
+    // work in Chrome, IE and Edge
+    if(sel.node().nodeName === 'clipPath' && key === 'transform') {
+        throw new Error('d3 selection.attr called with key \'transform\' on a clipPath node');
+    }
+}
+
 function checkStyleVal(sel, key, val) {
     if(typeof val === 'string') {
         // in case of multipart styles (stroke-dasharray, margins, etc)