Skip to content

Commit cd96c12

Browse files
archmojarchmoj
committed
draw minor grid lines behide major grid lines
1 parent 7afdb78 commit cd96c12

16 files changed

+59
-48
lines changed

‎src/plots/cartesian/axes.js

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ var BADNUM = constants.BADNUM;
3636

3737
var ZERO_PATH = { K: 'zeroline' };
3838
var GRID_PATH = { K: 'gridline', L: 'path' };
39+
var MINORGRID_PATH = { K: 'minor-gridline', L: 'path' };
3940
var TICK_PATH = { K: 'tick', L: 'path' };
4041
var TICK_TEXT = { K: 'tick', L: 'text' };
4142

@@ -2196,6 +2197,7 @@ axes.draw = function(gd, arg, opts) {
21962197
plotinfo.xaxislayer.selectAll('.' + xa._id + 'divider').remove();
21972198
plotinfo.yaxislayer.selectAll('.' + ya._id + 'divider').remove();
21982199

2200+
if(plotinfo.minorGridlayer) plotinfo.minorGridlayer.selectAll('path').remove();
21992201
if(plotinfo.gridlayer) plotinfo.gridlayer.selectAll('path').remove();
22002202
if(plotinfo.zerolinelayer) plotinfo.zerolinelayer.selectAll('path').remove();
22012203

@@ -2349,6 +2351,7 @@ axes.drawOne = function(gd, ax, opts) {
23492351
vals: gridVals,
23502352
counterAxis: counterAxis,
23512353
layer: plotinfo.gridlayer.select('.' + axId),
2354+
minorLayer: plotinfo.minorGridlayer.select('.' + axId),
23522355
path: gridPath,
23532356
transFn: transTickFn
23542357
});
@@ -3124,26 +3127,16 @@ axes.drawGrid = function(gd, ax, opts) {
31243127
var cls = ax._id + 'grid';
31253128

31263129
var hasMinor = ax.minor && ax.minor.showgrid;
3127-
3128-
var vals = []
3129-
.concat(hasMinor ?
3130-
// minor vals
3131-
opts.vals.filter(function(d) { return d.minor; }) :
3132-
[]
3133-
)
3134-
.concat(ax.showgrid ?
3135-
// major vals
3136-
opts.vals.filter(function(d) { return !d.minor; }) :
3137-
[]
3138-
);
3130+
var minorVals = hasMinor ? opts.vals.filter(function(d) { return d.minor; }) : [];
3131+
var majorVals = ax.showgrid ? opts.vals.filter(function(d) { return !d.minor; }) : [];
31393132

31403133
var counterAx = opts.counterAxis;
31413134
if(counterAx && axes.shouldShowZeroLine(gd, ax, counterAx)) {
31423135
var isArrayMode = ax.tickmode === 'array';
3143-
for(var i = 0; i < vals.length; i++) {
3144-
var xi = vals[i].x;
3136+
for(var i = 0; i < majorVals.length; i++) {
3137+
var xi = majorVals[i].x;
31453138
if(isArrayMode ? !xi : (Math.abs(xi) < ax.dtick / 100)) {
3146-
vals = vals.slice(0, i).concat(vals.slice(i + 1));
3139+
majorVals = majorVals.slice(0, i).concat(majorVals.slice(i + 1));
31473140
// In array mode you can in principle have multiple
31483141
// ticks at 0, so test them all. Otherwise once we found
31493142
// one we can stop.
@@ -3153,42 +3146,50 @@ axes.drawGrid = function(gd, ax, opts) {
31533146
}
31543147
}
31553148

3156-
var grid = opts.layer.selectAll('path.' + cls)
3157-
.data(vals, tickDataFn);
3149+
ax._gw =
3150+
Drawing.crispRound(gd, ax.gridwidth, 1);
31583151

3159-
grid.exit().remove();
3152+
var wMinor = !hasMinor ? 0 :
3153+
Drawing.crispRound(gd, ax.minor.gridwidth, 1);
31603154

3161-
grid.enter().append('path')
3162-
.classed(cls, 1)
3163-
.classed('crisp', opts.crisp !== false);
3155+
var majorLayer = opts.layer;
3156+
var minorLayer = opts.minorLayer;
3157+
for(var major = 1; major >= 0; major--) {
3158+
var layer = major ? majorLayer : minorLayer;
3159+
if(!layer) continue;
31643160

3165-
ax._gw = Drawing.crispRound(gd, ax.gridwidth, 1);
3161+
var grid = layer.selectAll('path.' + cls)
3162+
.data(major ? majorVals : minorVals, tickDataFn);
31663163

3167-
var wMinor;
3168-
if(hasMinor) wMinor = Drawing.crispRound(gd, ax.minor.gridwidth, 1);
3164+
grid.exit().remove();
31693165

3170-
grid.attr('transform', opts.transFn)
3171-
.attr('d', opts.path)
3172-
.each(function(d) {
3173-
return Color.stroke(d3.select(this), d.minor ?
3174-
ax.minor.gridcolor :
3175-
(ax.gridcolor || '#ddd')
3176-
);
3177-
})
3178-
.style('stroke-dasharray', function(d) {
3179-
return Drawing.dashStyle(
3180-
d.minor ? ax.minor.griddash : ax.griddash,
3181-
d.minor ? ax.minor.gridwidth : ax.gridwidth
3182-
);
3183-
})
3184-
.style('stroke-width', function(d) {
3185-
return (d.minor ? wMinor : ax._gw) + 'px';
3186-
})
3187-
.style('display', null); // visible
3166+
grid.enter().append('path')
3167+
.classed(cls, 1)
3168+
.classed('crisp', opts.crisp !== false);
3169+
3170+
grid.attr('transform', opts.transFn)
3171+
.attr('d', opts.path)
3172+
.each(function(d) {
3173+
return Color.stroke(d3.select(this), d.minor ?
3174+
ax.minor.gridcolor :
3175+
(ax.gridcolor || '#ddd')
3176+
);
3177+
})
3178+
.style('stroke-dasharray', function(d) {
3179+
return Drawing.dashStyle(
3180+
d.minor ? ax.minor.griddash : ax.griddash,
3181+
d.minor ? ax.minor.gridwidth : ax.gridwidth
3182+
);
3183+
})
3184+
.style('stroke-width', function(d) {
3185+
return (d.minor ? wMinor : ax._gw) + 'px';
3186+
})
3187+
.style('display', null); // visible
31883188

3189-
hideCounterAxisInsideTickLabels(ax, [GRID_PATH]);
3189+
if(typeof opts.path === 'function') grid.attr('d', opts.path);
3190+
}
31903191

3191-
if(typeof opts.path === 'function') grid.attr('d', opts.path);
3192+
hideCounterAxisInsideTickLabels(ax, [GRID_PATH, MINORGRID_PATH]);
31923193
};
31933194

31943195
/**
@@ -3455,6 +3456,7 @@ axes.drawLabels = function(gd, ax, opts) {
34553456
if(anchorAx && insideTicklabelposition(anchorAx)) {
34563457
(partialOpts || [
34573458
ZERO_PATH,
3459+
MINORGRID_PATH,
34583460
GRID_PATH,
34593461
TICK_PATH,
34603462
TICK_TEXT
@@ -3468,6 +3470,7 @@ axes.drawLabels = function(gd, ax, opts) {
34683470

34693471
var sel;
34703472
if(e.K === ZERO_PATH.K) sel = mainPlotinfo.zerolinelayer.selectAll('.' + ax._id + 'zl');
3473+
else if(e.K === MINORGRID_PATH.K) sel = mainPlotinfo.minorGridlayer.selectAll('.' + ax._id);
34713474
else if(e.K === GRID_PATH.K) sel = mainPlotinfo.gridlayer.selectAll('.' + ax._id);
34723475
else sel = mainPlotinfo[ax._id.charAt(0) + 'axislayer'];
34733476

‎src/plots/cartesian/index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -461,6 +461,7 @@ function makeSubplotLayer(gd, plotinfo) {
461461
plotinfo.shapelayer = ensureSingle(backLayer, 'g', 'shapelayer');
462462
plotinfo.imagelayer = ensureSingle(backLayer, 'g', 'imagelayer');
463463

464+
plotinfo.minorGridlayer = ensureSingle(plotgroup, 'g', 'minor-gridlayer');
464465
plotinfo.gridlayer = ensureSingle(plotgroup, 'g', 'gridlayer');
465466
plotinfo.zerolinelayer = ensureSingle(plotgroup, 'g', 'zerolinelayer');
466467

@@ -500,6 +501,7 @@ function makeSubplotLayer(gd, plotinfo) {
500501
// their other components to the corresponding
501502
// extra groups of their main plots.
502503

504+
plotinfo.minorGridlayer = mainplotinfo.minorGridlayer;
503505
plotinfo.gridlayer = mainplotinfo.gridlayer;
504506
plotinfo.zerolinelayer = mainplotinfo.zerolinelayer;
505507

@@ -525,6 +527,12 @@ function makeSubplotLayer(gd, plotinfo) {
525527
// common attributes for all subplots, overlays or not
526528

527529
if(!hasOnlyLargeSploms) {
530+
ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.xaxis._id);
531+
ensureSingleAndAddDatum(plotinfo.minorGridlayer, 'g', plotinfo.yaxis._id);
532+
plotinfo.minorGridlayer.selectAll('g')
533+
.map(function(d) { return d[0]; })
534+
.sort(axisIds.idSort);
535+
528536
ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.xaxis._id);
529537
ensureSingleAndAddDatum(plotinfo.gridlayer, 'g', plotinfo.yaxis._id);
530538
plotinfo.gridlayer.selectAll('g')

‎test/image/baselines/11.png

-262 Bytes
Loading

‎test/image/baselines/14.png

835 Bytes
Loading

‎test/image/baselines/17.png

224 Bytes
Loading

‎test/image/baselines/19.png

163 Bytes
Loading

‎test/image/baselines/24.png

491 Bytes
Loading

‎test/image/baselines/h-colorbar01.png

67 Bytes
Loading

‎test/image/baselines/h-colorbar02.png

-26 Bytes
Loading

‎test/image/baselines/h-colorbar03.png

54 Bytes
Loading

‎test/image/baselines/h-colorbar04.png

693 Bytes
Loading

‎test/image/baselines/ticklabelposition-0.png

988 Bytes
Loading

‎test/image/baselines/ticklabelposition-1.png

468 Bytes
Loading

‎test/image/baselines/ticklabelposition-2.png

0 Bytes
Loading

‎test/image/baselines/ticklabelposition-5.png

152 Bytes
Loading

‎test/jasmine/tests/splom_test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -807,7 +807,7 @@ describe('Test splom interactions:', function() {
807807
.then(function() {
808808
_assert({
809809
subplotCnt: 25,
810-
innerSubplotNodeCnt: 17,
810+
innerSubplotNodeCnt: 18,
811811
hasSplomGrid: false,
812812
bgCnt: 0
813813
});
@@ -826,8 +826,8 @@ describe('Test splom interactions:', function() {
826826
// from large -> small splom:
827827
// grid layer would be above xaxis layer,
828828
// if we didn't clear subplot children.
829-
expect(gridIndex).toBe(1, '<g.gridlayer> index');
830-
expect(xaxisIndex).toBe(14, '<g.xaxislayer-above> index');
829+
expect(gridIndex).toBe(2, '<g.gridlayer> index');
830+
expect(xaxisIndex).toBe(15, '<g.xaxislayer-above> index');
831831

832832
return Plotly.restyle(gd, 'dimensions', [dimsLarge]);
833833
})
@@ -839,7 +839,7 @@ describe('Test splom interactions:', function() {
839839
// new subplots though have reduced number of children.
840840
innerSubplotNodeCnt: function(d) {
841841
var p = d.match(SUBPLOT_PATTERN);
842-
return (p[1] > 5 || p[2] > 5) ? 4 : 17;
842+
return (p[1] > 5 || p[2] > 5) ? 4 : 18;
843843
},
844844
hasSplomGrid: true,
845845
bgCnt: 0

0 commit comments

Comments
 (0)