Skip to content

Commit 51e7512

Browse files
archmojarchmoj
authored
Merge pull request #6445 from plotly/no-vector-effect-static-plot
Fix scaling of SVG exports by not adding `vector-effect` to static plots
2 parents a4f6249 + 72bafd6 commit 51e7512

File tree

13 files changed

+33
-23
lines changed

13 files changed

+33
-23
lines changed

‎draftlogs/6445_fix.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- Fix scaling of exports e.g. the SVG format by not adding vector-effect CSS to static plots [[#6445](https://github.com/plotly/plotly.js/pull/6445)]

‎src/components/errorbars/plot.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ module.exports = function plot(gd, traces, plotinfo, transitionOpts) {
1313
var ya = plotinfo.yaxis;
1414

1515
var hasAnimation = transitionOpts && transitionOpts.duration > 0;
16+
var isStatic = gd._context.staticPlot;
1617

1718
traces.each(function(d) {
1819
var trace = d[0].trace;
@@ -84,7 +85,7 @@ module.exports = function plot(gd, traces, plotinfo, transitionOpts) {
8485

8586
if(isNew) {
8687
yerror = errorbar.append('path')
87-
.style('vector-effect', 'non-scaling-stroke')
88+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
8889
.classed('yerror', true);
8990
} else if(hasAnimation) {
9091
yerror = yerror
@@ -112,7 +113,7 @@ module.exports = function plot(gd, traces, plotinfo, transitionOpts) {
112113

113114
if(isNew) {
114115
xerror = errorbar.append('path')
115-
.style('vector-effect', 'non-scaling-stroke')
116+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
116117
.classed('xerror', true);
117118
} else if(hasAnimation) {
118119
xerror = xerror

‎src/traces/bar/plot.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
7979
var xa = plotinfo.xaxis;
8080
var ya = plotinfo.yaxis;
8181
var fullLayout = gd._fullLayout;
82+
var isStatic = gd._context.staticPlot;
8283

8384
if(!opts) {
8485
opts = {
@@ -233,7 +234,7 @@ function plot(gd, plotinfo, cdModule, traceLayer, opts, makeOnCompleteCallback)
233234

234235
var sel = transition(Lib.ensureSingle(bar, 'path'), fullLayout, opts, makeOnCompleteCallback);
235236
sel
236-
.style('vector-effect', 'non-scaling-stroke')
237+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
237238
.attr('d', (isNaN((x1 - x0) * (y1 - y0)) || (isBlank && gd._context.staticPlot)) ? 'M0,0Z' : 'M' + x0 + ',' + y0 + 'V' + y1 + 'H' + x1 + 'V' + y0 + 'Z')
238239
.call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
239240

‎src/traces/barpolar/plot.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var Drawing = require('../../components/drawing');
88
var helpers = require('../../plots/polar/helpers');
99

1010
module.exports = function plot(gd, subplot, cdbar) {
11+
var isStatic = gd._context.staticPlot;
1112
var xa = subplot.xaxis;
1213
var ya = subplot.yaxis;
1314
var radialAxis = subplot.radialAxis;
@@ -21,7 +22,7 @@ module.exports = function plot(gd, subplot, cdbar) {
2122
var bars = pointGroup.selectAll('g.point').data(Lib.identity);
2223

2324
bars.enter().append('g')
24-
.style('vector-effect', 'non-scaling-stroke')
25+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
2526
.style('stroke-miterlimit', 2)
2627
.classed('point', true);
2728

‎src/traces/box/plot.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var JITTERCOUNT = 5; // points either side of this to include
1010
var JITTERSPREAD = 0.01; // fraction of IQR to count as "dense"
1111

1212
function plot(gd, plotinfo, cdbox, boxLayer) {
13+
var isStatic = gd._context.staticPlot;
1314
var xa = plotinfo.xaxis;
1415
var ya = plotinfo.yaxis;
1516

@@ -37,13 +38,13 @@ function plot(gd, plotinfo, cdbox, boxLayer) {
3738
valAxis = ya;
3839
}
3940

40-
plotBoxAndWhiskers(plotGroup, {pos: posAxis, val: valAxis}, trace, t);
41+
plotBoxAndWhiskers(plotGroup, {pos: posAxis, val: valAxis}, trace, t, isStatic);
4142
plotPoints(plotGroup, {x: xa, y: ya}, trace, t);
4243
plotBoxMean(plotGroup, {pos: posAxis, val: valAxis}, trace, t);
4344
});
4445
}
4546

46-
function plotBoxAndWhiskers(sel, axes, trace, t) {
47+
function plotBoxAndWhiskers(sel, axes, trace, t, isStatic) {
4748
var isHorizontal = trace.orientation === 'h';
4849
var valAxis = axes.val;
4950
var posAxis = axes.pos;
@@ -73,7 +74,7 @@ function plotBoxAndWhiskers(sel, axes, trace, t) {
7374
) ? Lib.identity : []);
7475

7576
paths.enter().append('path')
76-
.style('vector-effect', 'non-scaling-stroke')
77+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
7778
.attr('class', 'box');
7879

7980
paths.exit().remove();

‎src/traces/carpet/plot.js

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var strTranslate = Lib.strTranslate;
1212
var alignmentConstants = require('../../constants/alignment');
1313

1414
module.exports = function plot(gd, plotinfo, cdcarpet, carpetLayer) {
15+
var isStatic = gd._context.staticPlot;
1516
var xa = plotinfo.xaxis;
1617
var ya = plotinfo.yaxis;
1718
var fullLayout = gd._fullLayout;
@@ -31,15 +32,15 @@ module.exports = function plot(gd, plotinfo, cdcarpet, carpetLayer) {
3132

3233
axisLayer.style('opacity', trace.opacity);
3334

34-
drawGridLines(xa, ya, majorLayer, aax, 'a', aax._gridlines, true);
35-
drawGridLines(xa, ya, majorLayer, bax, 'b', bax._gridlines, true);
36-
drawGridLines(xa, ya, minorLayer, aax, 'a', aax._minorgridlines, true);
37-
drawGridLines(xa, ya, minorLayer, bax, 'b', bax._minorgridlines, true);
35+
drawGridLines(xa, ya, majorLayer, aax, 'a', aax._gridlines, true, isStatic);
36+
drawGridLines(xa, ya, majorLayer, bax, 'b', bax._gridlines, true, isStatic);
37+
drawGridLines(xa, ya, minorLayer, aax, 'a', aax._minorgridlines, true, isStatic);
38+
drawGridLines(xa, ya, minorLayer, bax, 'b', bax._minorgridlines, true, isStatic);
3839

3940
// NB: These are not omitted if the lines are not active. The joins must be executed
4041
// in order for them to get cleaned up without a full redraw
41-
drawGridLines(xa, ya, boundaryLayer, aax, 'a-boundary', aax._boundarylines);
42-
drawGridLines(xa, ya, boundaryLayer, bax, 'b-boundary', bax._boundarylines);
42+
drawGridLines(xa, ya, boundaryLayer, aax, 'a-boundary', aax._boundarylines, isStatic);
43+
drawGridLines(xa, ya, boundaryLayer, bax, 'b-boundary', bax._boundarylines, isStatic);
4344

4445
var labelOrientationA = drawAxisLabels(gd, xa, ya, trace, cd0, labelLayer, aax._labels, 'a-label');
4546
var labelOrientationB = drawAxisLabels(gd, xa, ya, trace, cd0, labelLayer, bax._labels, 'b-label');
@@ -79,13 +80,13 @@ function drawClipPath(trace, t, layer, xaxis, yaxis) {
7980
path.attr('d', clipPathData);
8081
}
8182

82-
function drawGridLines(xaxis, yaxis, layer, axis, axisLetter, gridlines) {
83+
function drawGridLines(xaxis, yaxis, layer, axis, axisLetter, gridlines, isStatic) {
8384
var lineClass = 'const-' + axisLetter + '-lines';
8485
var gridJoin = layer.selectAll('.' + lineClass).data(gridlines);
8586

8687
gridJoin.enter().append('path')
8788
.classed(lineClass, true)
88-
.style('vector-effect', 'non-scaling-stroke');
89+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke');
8990

9091
gridJoin.each(function(d) {
9192
var gridline = d;

‎src/traces/contour/plot.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,7 @@ function joinAllPaths(pi, perimeter) {
200200
}
201201

202202
function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours) {
203+
var isStatic = gd._context.staticPlot;
203204
var lineContainer = Lib.ensureSingle(plotgroup, 'g', 'contourlines');
204205
var showLines = contours.showlines !== false;
205206
var showLabels = contours.showlabels;
@@ -209,7 +210,7 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours) {
209210
// if we're showing labels, because the fill paths include the perimeter
210211
// so can't be used to position the labels correctly.
211212
// In this case we'll remove the lines after making the labels.
212-
var linegroup = exports.createLines(lineContainer, showLines || showLabels, pathinfo);
213+
var linegroup = exports.createLines(lineContainer, showLines || showLabels, pathinfo, isStatic);
213214

214215
var lineClip = exports.createLineClip(lineContainer, clipLinesForLabels, gd, cd0.trace.uid);
215216

@@ -318,7 +319,7 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours) {
318319
if(showLabels && !showLines) linegroup.remove();
319320
}
320321

321-
exports.createLines = function(lineContainer, makeLines, pathinfo) {
322+
exports.createLines = function(lineContainer, makeLines, pathinfo, isStatic) {
322323
var smoothing = pathinfo[0].smoothing;
323324

324325
var linegroup = lineContainer.selectAll('g.contourlevel')
@@ -343,7 +344,7 @@ exports.createLines = function(lineContainer, makeLines, pathinfo) {
343344
return Drawing.smoothopen(d, smoothing);
344345
})
345346
.style('stroke-miterlimit', 1)
346-
.style('vector-effect', 'non-scaling-stroke');
347+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke');
347348

348349
var closedcontourlines = linegroup.selectAll('path.closedline')
349350
.data(function(d) { return d.ppaths || d.paths; });
@@ -357,7 +358,7 @@ exports.createLines = function(lineContainer, makeLines, pathinfo) {
357358
return Drawing.smoothclosed(d, smoothing);
358359
})
359360
.style('stroke-miterlimit', 1)
360-
.style('vector-effect', 'non-scaling-stroke');
361+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke');
361362
}
362363

363364
return linegroup;

‎src/traces/contourcarpet/plot.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ function mapPathinfo(pathinfo, map) {
134134
}
135135

136136
function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, plotinfo, carpet) {
137+
var isStatic = gd._context.staticPlot;
137138
var lineContainer = Lib.ensureSingle(plotgroup, 'g', 'contourlines');
138139
var showLines = contours.showlines !== false;
139140
var showLabels = contours.showlabels;
@@ -143,7 +144,7 @@ function makeLinesAndLabels(plotgroup, pathinfo, gd, cd0, contours, plotinfo, ca
143144
// if we're showing labels, because the fill paths include the perimeter
144145
// so can't be used to position the labels correctly.
145146
// In this case we'll remove the lines after making the labels.
146-
var linegroup = contourPlot.createLines(lineContainer, showLines || showLabels, pathinfo);
147+
var linegroup = contourPlot.createLines(lineContainer, showLines || showLabels, pathinfo, isStatic);
147148

148149
var lineClip = contourPlot.createLineClip(lineContainer, clipLinesForLabels, gd, cd0.trace.uid);
149150

‎src/traces/scatter/plot.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ function createFills(gd, traceJoin, plotinfo) {
105105
}
106106

107107
function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transitionOpts) {
108+
var isStatic = gd._context.staticPlot;
108109
var i;
109110

110111
// Since this has been reorganized and we're executing this on individual traces,
@@ -279,7 +280,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
279280

280281
lineJoin.enter().append('path')
281282
.classed('js-line', true)
282-
.style('vector-effect', 'non-scaling-stroke')
283+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
283284
.call(Drawing.lineGroupStyle)
284285
.each(makeUpdate(true));
285286

‎src/traces/violin/plot.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ var linePoints = require('../scatter/line_points');
99
var helpers = require('./helpers');
1010

1111
module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
12+
var isStatic = gd._context.staticPlot;
1213
var fullLayout = gd._fullLayout;
1314
var xa = plotinfo.xaxis;
1415
var ya = plotinfo.yaxis;
@@ -49,7 +50,7 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
4950
var violins = plotGroup.selectAll('path.violin').data(Lib.identity);
5051

5152
violins.enter().append('path')
52-
.style('vector-effect', 'non-scaling-stroke')
53+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke')
5354
.attr('class', 'violin');
5455

5556
violins.exit().remove();
@@ -163,7 +164,7 @@ module.exports = function plot(gd, plotinfo, cdViolins, violinLayer) {
163164
meanPaths.enter().append('path')
164165
.attr('class', 'meanline')
165166
.style('fill', 'none')
166-
.style('vector-effect', 'non-scaling-stroke');
167+
.style('vector-effect', isStatic ? 'none' : 'non-scaling-stroke');
167168
meanPaths.exit().remove();
168169
meanPaths.each(function(d) {
169170
var v = valAxis.c2p(d.mean, true);

‎test/image/baselines/17.png

44 Bytes
Loading

‎test/image/baselines/28.png

127 Bytes
Loading

‎test/image/baselines/line_scatter.png

-188 Bytes
Loading

0 commit comments

Comments
 (0)