diff --git a/src/traces/scatter/plot.js b/src/traces/scatter/plot.js index eec2d39e05b..e4b454857dd 100644 --- a/src/traces/scatter/plot.js +++ b/src/traces/scatter/plot.js @@ -204,7 +204,6 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition // initialize line join data / method var segments = [], - lineSegments = [], makeUpdate = Lib.noop; ownFillEl3 = trace._ownFill; @@ -225,7 +224,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition else if(line.shape === 'spline') { pathfn = revpathbase = function(pts) { var pLast = pts[pts.length - 1]; - if(pts[0][0] === pLast[0] && pts[0][1] === pLast[1]) { + if(pts.length > 1 && pts[0][0] === pLast[0] && pts[0][1] === pLast[1]) { // identical start and end points: treat it as a // closed curve so we don't get a kink return Drawing.smoothclosed(pts.slice(1), line.smoothing); @@ -270,10 +269,6 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition pt1 = lastSegment[lastSegment.length - 1]; } - lineSegments = segments.filter(function(s) { - return s.length > 1; - }); - makeUpdate = function(isEnter) { return function(pts) { thispath = pathfn(pts); @@ -312,7 +307,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition }; } - var lineJoin = tr.selectAll('.js-line').data(lineSegments); + var lineJoin = tr.selectAll('.js-line').data(segments); transition(lineJoin.exit()) .style('opacity', 0) diff --git a/test/image/baselines/scatter_fill_corner_cases.png b/test/image/baselines/scatter_fill_corner_cases.png new file mode 100644 index 00000000000..c4c59769692 Binary files /dev/null and b/test/image/baselines/scatter_fill_corner_cases.png differ diff --git a/test/image/mocks/scatter_fill_corner_cases.json b/test/image/mocks/scatter_fill_corner_cases.json new file mode 100644 index 00000000000..febf2052b23 --- /dev/null +++ b/test/image/mocks/scatter_fill_corner_cases.json @@ -0,0 +1,180 @@ +{ + "data": [ + { + "x": [1.5], + "y": [1.25], + "fill": "tozeroy", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 2, 3], + "y": [1, null, 1, 1.1, 1], + "fill": "tozeroy", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3], + "y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75], + "fill": "tozeroy", + "showlegend": false + }, + { + "x": [0, 1, 2, 2.5, 3], + "y": [0.5, 0.6, 0.5, null, 0.5], + "line": {"shape": "vh", "color": "black", "dash": "dot"}, + "fill": "tozeroy", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 1.5, 2, 2.5, 3], + "y": [0.25, null, 0.35, null, 0.15, null, 0.25], + "fill": "tozeroy", + "showlegend": false + }, + { + "x": [1.5], + "y": [1.25], + "fill": "tozeroy", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 2, 3], + "y": [1, null, 1, 1.1, 1], + "fill": "tozeroy", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3], + "y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75], + "fill": "tozeroy", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false + }, + { + "x": [0, 1, 2, 2.5, 3], + "y": [0.5, 0.6, 0.5, null, 0.5], + "fill": "tozeroy", + "line": {"shape": "vh", "color": "black", "dash": "dot"}, + "xaxis": "x2", + "showlegend": false + }, + { + "x": [0, 0.5, 1, 1.5, 2, 2.5, 3], + "y": [0.25, null, 0.35, null, 0.15, null, 0.25], + "fill": "tozeroy", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false + }, + + { + "x": [1.5], + "y": [1.25], + "fill": "tonexty", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 2, 3], + "y": [1, null, 1, 1.1, 1], + "fill": "tonexty", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3], + "y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75], + "fill": "tonexty", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 1, 2, 2.5, 3], + "y": [0.5, 0.6, 0.5, null, 0.5], + "line": {"shape": "vh", "color": "black", "dash": "dot"}, + "fill": "tonexty", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 1.5, 2, 2.5, 3], + "y": [0.25, null, 0.35, null, 0.15, null, 0.25], + "fill": "tonexty", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [1.5], + "y": [1.25], + "fill": "tonexty", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 2, 3], + "y": [1, null, 1, 1.1, 1], + "fill": "tonexty", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false, + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3], + "y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75], + "fill": "tonexty", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false, + "yaxis": "y2" + }, + { + "name": "vh shape", + "x": [0, 1, 2, 2.5, 3], + "y": [0.5, 0.6, 0.5, null, 0.5], + "fill": "tonexty", + "line": {"shape": "vh", "color": "black", "dash": "dot"}, + "xaxis": "x2", + "yaxis": "y2" + }, + { + "x": [0, 0.5, 1, 1.5, 2, 2.5, 3], + "y": [0.25, null, 0.35, null, 0.15, null, 0.25], + "fill": "tonexty", + "line": {"shape": "spline"}, + "xaxis": "x2", + "showlegend": false, + "yaxis": "y2" + } + ], + "layout": { + "xaxis": { + "domain": [0, 0.45], + "title": "linear" + }, + "xaxis2": { + "domain": [0.55, 1], + "title": "spline" + }, + "yaxis": { + "domain": [0.05, 0.475], + "title": "tozeroy" + }, + "yaxis2": { + "domain": [0.525, 1], + "title": "tonexty" + }, + "legend": { + "orientation": "h" + }, + "width": 600, + "height": 600 + } +}