Skip to content

Implement axis.layer with 'above traces' and 'below traces' values #1871

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jul 13, 2017
Merged

Implement axis.layer with 'above traces' and 'below traces' values #1871

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7b62b73
handle cliponaxis false/true traces coexisting on same subplot
etpinard Jul 11, 2017
02b9fbc
rename 'layers' cartesian constant -> 'traceLayerClasses'
etpinard Jul 11, 2017
1c85de6
add 'layer' axis attribute
etpinard Jul 11, 2017
e44aa4d
improve cliponaxis_false mock
etpinard Jul 11, 2017
e84701f
replace strict-d3 IIFE with browserify 'require' transform
etpinard Jul 12, 2017
e234827
fixes #1873 - apply transform on <clipPath> child
etpinard Jul 12, 2017
6f494c6
talk about 'cliponaxis' in axis 'layer' description and vice-versa
etpinard Jul 12, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/plots/cartesian/dragbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See https://codepen.io/etpinard/pen/eRbxrp?editors=1010 for more info on this topic.

.call(Drawing.setTranslate, clipDx, clipDy)
.call(Drawing.setScale, xScaleFactor2, yScaleFactor2);

Expand Down
4 changes: 2 additions & 2 deletions src/plots/cartesian/transition_axes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions src/plots/ternary/ternary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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];
Expand Down
24 changes: 24 additions & 0 deletions test/image/strict-d3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand All @@ -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') {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No need for additional jasmine tests cases, this here made many animation and interaction test fail.

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)
Expand Down