diff --git a/src/traces/scatter/plot.js b/src/traces/scatter/plot.js index f22a75fbfd5..66abb9a015e 100644 --- a/src/traces/scatter/plot.js +++ b/src/traces/scatter/plot.js @@ -83,6 +83,9 @@ function createFills(gd, traceJoin, plotinfo) { var trace = d[0].trace; + trace._ownFill = null; + trace._nextFill = null; + var fillData = []; if(trace._ownfill) fillData.push('_ownFill'); if(trace._nexttrace) fillData.push('_nextFill'); @@ -91,9 +94,7 @@ function createFills(gd, traceJoin, plotinfo) { fillJoin.enter().append('g'); - fillJoin.exit() - .each(function(d) { trace[d] = null; }) - .remove(); + fillJoin.exit().remove(); fillJoin.order().each(function(d) { // make a path element inside the fill group, just so diff --git a/test/jasmine/tests/scatter_test.js b/test/jasmine/tests/scatter_test.js index 8a3739d0d69..4c27d0a9bb8 100644 --- a/test/jasmine/tests/scatter_test.js +++ b/test/jasmine/tests/scatter_test.js @@ -1361,6 +1361,50 @@ describe('stacked area', function() { }) .then(done, done.fail); }); + + it('maintains correct fill elements when toggling trace visibility in stacked area charts', function(done) { + // Regression test for issue #7660 + // When isolating, then hiding all, then showing all traces in a stacked area chart, + // fill elements should be correctly drawn for all traces. + + function countNonEmptyFills() { + return d3SelectAll('.scatterlayer .js-fill').filter(function() { + var d = d3Select(this).attr('d'); + return d && d !== 'M0,0Z'; + }).size(); + } + + Plotly.newPlot(gd, [ + {x: [1, 2, 3], y: [2, 1, 4], stackgroup: 'one', name: 'trace 0'}, + {x: [1, 2, 3], y: [1, 1, 2], stackgroup: 'one', name: 'trace 1'}, + {x: [1, 2, 3], y: [3, 0, 2], stackgroup: 'one', name: 'trace 2'} + ]) + .then(function() { + // Initially all 3 traces should be visible with fills + expect(countNonEmptyFills()).toBe(3, 'should have 3 fill paths initially'); + + // Show trace 1 only + return Plotly.restyle(gd, 'visible', ['legendonly', true, 'legendonly']); + }) + .then(function() { + // Verify only one fill is drawn (trace 1) + expect(countNonEmptyFills()).toBe(1, 'should have 1 fill path when isolating trace 1'); + // Hide all traces + return Plotly.restyle(gd, 'visible', ['legendonly', 'legendonly', 'legendonly']); + }) + .then(function() { + // Verify no fills are drawn + expect(countNonEmptyFills()).toBe(0, 'should have 0 fill paths when hiding all traces'); + // Show all traces again + return Plotly.restyle(gd, 'visible', [true, true, true]); + }) + .then(function() { + // Verify all 3 fills are drawn again + // This is the step that was failing in #7660 + expect(countNonEmptyFills()).toBe(3, 'should have 3 fill paths after showing all traces again'); + }) + .then(done, done.fail); + }); }); describe('scatter hoverPoints', function() {