Skip to content

Commit 88764fa

Browse files
authored
Merge pull request #1933 from plotly/fix-scatter-corner-cases
Fix scatter fill with isolated endpoints
2 parents 98377fc + 0ad3ce4 commit 88764fa

File tree

3 files changed

+182
-7
lines changed

3 files changed

+182
-7
lines changed

src/traces/scatter/plot.js

+2-7
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,6 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
204204

205205
// initialize line join data / method
206206
var segments = [],
207-
lineSegments = [],
208207
makeUpdate = Lib.noop;
209208

210209
ownFillEl3 = trace._ownFill;
@@ -225,7 +224,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
225224
else if(line.shape === 'spline') {
226225
pathfn = revpathbase = function(pts) {
227226
var pLast = pts[pts.length - 1];
228-
if(pts[0][0] === pLast[0] && pts[0][1] === pLast[1]) {
227+
if(pts.length > 1 && pts[0][0] === pLast[0] && pts[0][1] === pLast[1]) {
229228
// identical start and end points: treat it as a
230229
// closed curve so we don't get a kink
231230
return Drawing.smoothclosed(pts.slice(1), line.smoothing);
@@ -270,10 +269,6 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
270269
pt1 = lastSegment[lastSegment.length - 1];
271270
}
272271

273-
lineSegments = segments.filter(function(s) {
274-
return s.length > 1;
275-
});
276-
277272
makeUpdate = function(isEnter) {
278273
return function(pts) {
279274
thispath = pathfn(pts);
@@ -312,7 +307,7 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
312307
};
313308
}
314309

315-
var lineJoin = tr.selectAll('.js-line').data(lineSegments);
310+
var lineJoin = tr.selectAll('.js-line').data(segments);
316311

317312
transition(lineJoin.exit())
318313
.style('opacity', 0)
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
{
2+
"data": [
3+
{
4+
"x": [1.5],
5+
"y": [1.25],
6+
"fill": "tozeroy",
7+
"showlegend": false
8+
},
9+
{
10+
"x": [0, 0.5, 1, 2, 3],
11+
"y": [1, null, 1, 1.1, 1],
12+
"fill": "tozeroy",
13+
"showlegend": false
14+
},
15+
{
16+
"x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
17+
"y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75],
18+
"fill": "tozeroy",
19+
"showlegend": false
20+
},
21+
{
22+
"x": [0, 1, 2, 2.5, 3],
23+
"y": [0.5, 0.6, 0.5, null, 0.5],
24+
"line": {"shape": "vh", "color": "black", "dash": "dot"},
25+
"fill": "tozeroy",
26+
"showlegend": false
27+
},
28+
{
29+
"x": [0, 0.5, 1, 1.5, 2, 2.5, 3],
30+
"y": [0.25, null, 0.35, null, 0.15, null, 0.25],
31+
"fill": "tozeroy",
32+
"showlegend": false
33+
},
34+
{
35+
"x": [1.5],
36+
"y": [1.25],
37+
"fill": "tozeroy",
38+
"line": {"shape": "spline"},
39+
"xaxis": "x2",
40+
"showlegend": false
41+
},
42+
{
43+
"x": [0, 0.5, 1, 2, 3],
44+
"y": [1, null, 1, 1.1, 1],
45+
"fill": "tozeroy",
46+
"line": {"shape": "spline"},
47+
"xaxis": "x2",
48+
"showlegend": false
49+
},
50+
{
51+
"x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
52+
"y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75],
53+
"fill": "tozeroy",
54+
"line": {"shape": "spline"},
55+
"xaxis": "x2",
56+
"showlegend": false
57+
},
58+
{
59+
"x": [0, 1, 2, 2.5, 3],
60+
"y": [0.5, 0.6, 0.5, null, 0.5],
61+
"fill": "tozeroy",
62+
"line": {"shape": "vh", "color": "black", "dash": "dot"},
63+
"xaxis": "x2",
64+
"showlegend": false
65+
},
66+
{
67+
"x": [0, 0.5, 1, 1.5, 2, 2.5, 3],
68+
"y": [0.25, null, 0.35, null, 0.15, null, 0.25],
69+
"fill": "tozeroy",
70+
"line": {"shape": "spline"},
71+
"xaxis": "x2",
72+
"showlegend": false
73+
},
74+
75+
{
76+
"x": [1.5],
77+
"y": [1.25],
78+
"fill": "tonexty",
79+
"showlegend": false,
80+
"yaxis": "y2"
81+
},
82+
{
83+
"x": [0, 0.5, 1, 2, 3],
84+
"y": [1, null, 1, 1.1, 1],
85+
"fill": "tonexty",
86+
"showlegend": false,
87+
"yaxis": "y2"
88+
},
89+
{
90+
"x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
91+
"y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75],
92+
"fill": "tonexty",
93+
"showlegend": false,
94+
"yaxis": "y2"
95+
},
96+
{
97+
"x": [0, 1, 2, 2.5, 3],
98+
"y": [0.5, 0.6, 0.5, null, 0.5],
99+
"line": {"shape": "vh", "color": "black", "dash": "dot"},
100+
"fill": "tonexty",
101+
"showlegend": false,
102+
"yaxis": "y2"
103+
},
104+
{
105+
"x": [0, 0.5, 1, 1.5, 2, 2.5, 3],
106+
"y": [0.25, null, 0.35, null, 0.15, null, 0.25],
107+
"fill": "tonexty",
108+
"showlegend": false,
109+
"yaxis": "y2"
110+
},
111+
{
112+
"x": [1.5],
113+
"y": [1.25],
114+
"fill": "tonexty",
115+
"line": {"shape": "spline"},
116+
"xaxis": "x2",
117+
"showlegend": false,
118+
"yaxis": "y2"
119+
},
120+
{
121+
"x": [0, 0.5, 1, 2, 3],
122+
"y": [1, null, 1, 1.1, 1],
123+
"fill": "tonexty",
124+
"line": {"shape": "spline"},
125+
"xaxis": "x2",
126+
"showlegend": false,
127+
"yaxis": "y2"
128+
},
129+
{
130+
"x": [0, 0.5, 1, 1.25, 1.5, 1.75, 2, 2.5, 3],
131+
"y": [0.75, 0.85, 0.75, null, 0.85, null, 0.75, 0.85, 0.75],
132+
"fill": "tonexty",
133+
"line": {"shape": "spline"},
134+
"xaxis": "x2",
135+
"showlegend": false,
136+
"yaxis": "y2"
137+
},
138+
{
139+
"name": "vh shape",
140+
"x": [0, 1, 2, 2.5, 3],
141+
"y": [0.5, 0.6, 0.5, null, 0.5],
142+
"fill": "tonexty",
143+
"line": {"shape": "vh", "color": "black", "dash": "dot"},
144+
"xaxis": "x2",
145+
"yaxis": "y2"
146+
},
147+
{
148+
"x": [0, 0.5, 1, 1.5, 2, 2.5, 3],
149+
"y": [0.25, null, 0.35, null, 0.15, null, 0.25],
150+
"fill": "tonexty",
151+
"line": {"shape": "spline"},
152+
"xaxis": "x2",
153+
"showlegend": false,
154+
"yaxis": "y2"
155+
}
156+
],
157+
"layout": {
158+
"xaxis": {
159+
"domain": [0, 0.45],
160+
"title": "linear"
161+
},
162+
"xaxis2": {
163+
"domain": [0.55, 1],
164+
"title": "spline"
165+
},
166+
"yaxis": {
167+
"domain": [0.05, 0.475],
168+
"title": "tozeroy"
169+
},
170+
"yaxis2": {
171+
"domain": [0.525, 1],
172+
"title": "tonexty"
173+
},
174+
"legend": {
175+
"orientation": "h"
176+
},
177+
"width": 600,
178+
"height": 600
179+
}
180+
}

0 commit comments

Comments
 (0)