Merge pull request #1897 from plotly/errorbars-nss

better zooming behavior for errorbars, bars, and box plots

Author: alexcjohnson

src/components/errorbars/plot.js

@@ -89,6 +89,7 @@ module.exports = function plot(traces, plotinfo, transitionOpts) {
 
                 if(isNew) {
                     yerror = errorbar.append('path')
+                        .style('vector-effect', 'non-scaling-stroke')
                         .classed('yerror', true);
                 } else if(hasAnimation) {
                     yerror = yerror
@@ -117,6 +118,7 @@ module.exports = function plot(traces, plotinfo, transitionOpts) {
 
                 if(isNew) {
                     xerror = errorbar.append('path')
+                        .style('vector-effect', 'non-scaling-stroke')
                         .classed('xerror', true);
                 } else if(hasAnimation) {
                     xerror = xerror

src/plots/cartesian/dragbox.js

@@ -747,7 +747,7 @@ module.exports = function dragBox(gd, plotinfo, x, y, w, h, ns, ew) {
                 .call(Drawing.setTranslate, clipDx, clipDy)
                 .call(Drawing.setScale, xScaleFactor2, yScaleFactor2);
 
-            var scatterPoints = subplot.plot.select('.scatterlayer').selectAll('.points');
+            var scatterPoints = subplot.plot.selectAll('.scatterlayer .points, .boxlayer .points');
 
             subplot.plot
                 .call(Drawing.setTranslate, plotDx, plotDy)

src/traces/bar/plot.js

@@ -124,8 +124,10 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                     // append bar path and text
                     var bar = d3.select(this);
 
-                    bar.append('path').attr('d',
-                        'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
+                    bar.append('path')
+                        .style('vector-effect', 'non-scaling-stroke')
+                        .attr('d',
+                            'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z');
 
                     appendBarText(gd, bar, d, i, x0, x1, y0, y1);
                 });

src/traces/box/plot.js

@@ -82,6 +82,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
         d3.select(this).selectAll('path.box')
             .data(Lib.identity)
             .enter().append('path')
+            .style('vector-effect', 'non-scaling-stroke')
             .attr('class', 'box')
             .each(function(d) {
                 var posc = posAxis.c2p(d.pos + bPos, true),
@@ -204,6 +205,7 @@ module.exports = function plot(gd, plotinfo, cdbox) {
                     });
                 })
                 .enter().append('path')
+                .classed('point', true)
                 .call(Drawing.translatePoints, xa, ya);
         }
         // draw mean (and stdev diamond) if desired
@@ -212,7 +214,10 @@ module.exports = function plot(gd, plotinfo, cdbox) {
                 .data(Lib.identity)
                 .enter().append('path')
                 .attr('class', 'mean')
-                .style('fill', 'none')
+                .style({
+                    fill: 'none',
+                    'vector-effect': 'non-scaling-stroke'
+                })
                 .each(function(d) {
                     var posc = posAxis.c2p(d.pos + bPos, true),
                         pos0 = posAxis.c2p(d.pos + bPos - bdPos, true),