Skip to content

Commit 9df290e

Browse files
ErwanMASErwanMAS
committed
- when undefined values with option fill tozerox or tozeroy - order of fill scattergl when overlap
1 parent bdc94ce commit 9df290e

File tree

7 files changed

+188
-11
lines changed

7 files changed

+188
-11
lines changed

‎src/traces/scattergl/index.js

Lines changed: 67 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -259,15 +259,28 @@ function sceneUpdate(gd, subplot) {
259259
// draw traces in proper order
260260
scene.draw = function draw() {
261261
var i;
262+
var allReadyDrawLines = Lib.repeat(false, scene.count);
263+
var allReadyDrawMarkers = Lib.repeat(false, scene.count);
262264
for(i = 0; i < scene.count; i++) {
263265
if(scene.fill2d && scene.fillOptions[i]) {
264266
// must do all fills first
265267
scene.fill2d.draw(i);
268+
if(scene.line2d && scene.lineOptions[i] && ( scene.fillOptions[i].fillmode === 'tozeroy' || scene.fillOptions[i].fillmode === 'tozerox' )) {
269+
scene.line2d.draw(i);
270+
allReadyDrawLines[i] = true;
271+
}
272+
if(scene.scatter2d && scene.markerOptions[i] && (!scene.selectBatch || !scene.selectBatch[i]) && ( scene.fillOptions[i].fillmode === 'tozeroy' || scene.fillOptions[i].fillmode === 'tozerox' )) {
273+
// traces in no-selection mode
274+
scene.scatter2d.draw(i);
275+
allReadyDrawMarkers[i] = true;
276+
}
266277
}
267278
}
268279
for(i = 0; i < scene.count; i++) {
269280
if(scene.line2d && scene.lineOptions[i]) {
270-
scene.line2d.draw(i);
281+
if(!allReadyDrawLines[i]) {
282+
scene.line2d.draw(i);
283+
}
271284
}
272285
if(scene.error2d && scene.errorXOptions[i]) {
273286
scene.error2d.draw(i);
@@ -277,7 +290,9 @@ function sceneUpdate(gd, subplot) {
277290
}
278291
if(scene.scatter2d && scene.markerOptions[i] && (!scene.selectBatch || !scene.selectBatch[i])) {
279292
// traces in no-selection mode
280-
scene.scatter2d.draw(i);
293+
if(!allReadyDrawMarkers[i]) {
294+
scene.scatter2d.draw(i);
295+
}
281296
}
282297
}
283298

@@ -419,6 +434,24 @@ function plot(gd, subplot, cdata) {
419434
}
420435
if(scene.line2d) {
421436
scene.line2d.update(scene.lineOptions);
437+
scene.lineOptions = scene.lineOptions.map(function(lineOptions) {
438+
if(lineOptions && lineOptions.positions) {
439+
var pos = [], srcPos = lineOptions.positions;
440+
441+
var firstptdef = 0;
442+
while(isNaN(srcPos[firstptdef]) || isNaN(srcPos[firstptdef + 1])) {
443+
firstptdef += 2;
444+
}
445+
var lastptdef = srcPos.length - 2;
446+
while(isNaN(srcPos[lastptdef]) || isNaN(srcPos[lastptdef + 1])) {
447+
lastptdef += -2;
448+
}
449+
pos = pos.concat(srcPos.slice(firstptdef, lastptdef + 2));
450+
lineOptions.positions = pos;
451+
}
452+
return lineOptions;
453+
});
454+
scene.line2d.update(scene.lineOptions);
422455
}
423456
if(scene.error2d) {
424457
var errorBatch = (scene.errorXOptions || []).concat(scene.errorYOptions || []);
@@ -441,16 +474,38 @@ function plot(gd, subplot, cdata) {
441474
var pos = [], srcPos = (lineOptions && lineOptions.positions) || stash.positions;
442475

443476
if(trace.fill === 'tozeroy') {
444-
pos = [srcPos[0], 0];
445-
pos = pos.concat(srcPos);
446-
pos.push(srcPos[srcPos.length - 2]);
447-
pos.push(0);
477+
var firstpdef = 0;
478+
while(isNaN(srcPos[firstpdef + 1])) {
479+
firstpdef += 2;
480+
}
481+
var lastpdef = srcPos.length - 2;
482+
while(isNaN(srcPos[lastpdef + 1])) {
483+
lastpdef += -2;
484+
}
485+
if(srcPos[firstpdef + 1] !== 0) {
486+
pos = [ srcPos[firstpdef], 0 ];
487+
}
488+
pos = pos.concat(srcPos.slice(firstpdef, lastpdef + 2));
489+
if(srcPos[lastpdef + 1] !== 0) {
490+
pos = pos.concat([ srcPos[lastpdef], 0 ]);
491+
}
448492
}
449493
else if(trace.fill === 'tozerox') {
450-
pos = [0, srcPos[1]];
451-
pos = pos.concat(srcPos);
452-
pos.push(0);
453-
pos.push(srcPos[srcPos.length - 1]);
494+
var firstptdef = 0;
495+
while(isNaN(srcPos[firstptdef])) {
496+
firstptdef += 2;
497+
}
498+
var lastptdef = srcPos.length - 2;
499+
while(isNaN(srcPos[lastptdef])) {
500+
lastptdef += -2;
501+
}
502+
if(srcPos[firstptdef] !== 0) {
503+
pos = [ 0, srcPos[firstptdef + 1] ];
504+
}
505+
pos = pos.concat(srcPos.slice(firstptdef, lastptdef + 2));
506+
if(srcPos[lastptdef] !== 0) {
507+
pos = pos.concat([ 0, srcPos[lastptdef + 1]]);
508+
}
454509
}
455510
else if(trace.fill === 'toself' || trace.fill === 'tonext') {
456511
pos = [];
@@ -508,7 +563,8 @@ function plot(gd, subplot, cdata) {
508563
pos = pos.concat(prevLinePos);
509564
fillOptions.hole = hole;
510565
}
511-
566+
567+
fillOptions.fillmode = trace.fill;
512568
fillOptions.opacity = trace.opacity;
513569
fillOptions.positions = pos;
514570

‎test/image/baselines/gl2d_fill_trace_fillx.png

15.7 KB
Loading

‎test/image/baselines/gl2d_fill_trace_filly.png

14 KB
Loading

‎test/image/baselines/gl2d_fill_trace_order.png

14.9 KB
Loading

‎test/image/mocks/gl2d_fill_trace_fillx.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"data": [
3+
{
4+
"x": [null,3 , 3, null, null
5+
],
6+
"y": [ 100,125, 150,175 ,200 ],
7+
"type": "scattergl",
8+
"fill": "tozerox",
9+
"mode": "none",
10+
"showlegend": false,
11+
"fillcolor": "#FF69B4",
12+
"line": { "color": "#FF69B4" }
13+
14+
},
15+
{
16+
"x": [
17+
null,
18+
null,
19+
null,
20+
5,
21+
5
22+
],
23+
"y": [ 100,125, 150,175 ,200 ],
24+
"type": "scattergl",
25+
"fill": "tozerox",
26+
"mode": "markers+lines",
27+
"showlegend": false,
28+
"fillcolor": "#202ff0",
29+
"line": { "color": "#101ff0" }
30+
}
31+
],
32+
"layout": {
33+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
34+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
35+
}
36+
}

‎test/image/mocks/gl2d_fill_trace_filly.json

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"data": [
3+
{
4+
"x": [
5+
1,
6+
2,
7+
3,
8+
4,
9+
5
10+
],
11+
"y": [ null
12+
,
13+
100,
14+
100,null
15+
,null
16+
],
17+
"type": "scattergl",
18+
"fill": "tozeroy",
19+
"mode": "none",
20+
"showlegend": false,
21+
"fillcolor": "#90ff70",
22+
"line": { "color": "#90ff70" }
23+
24+
},
25+
{
26+
"x": [
27+
1,
28+
2,
29+
3,
30+
4,
31+
5
32+
],
33+
"y": [null
34+
,null
35+
,null
36+
,
37+
100,
38+
100
39+
],
40+
"type": "scattergl",
41+
"fill": "tozeroy",
42+
"mode": "markers+lines",
43+
"showlegend": false,
44+
"fillcolor": "#f02f20",
45+
"line": { "color": "#f01f10" }
46+
}
47+
],
48+
"layout": {
49+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
50+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
51+
}
52+
}

‎test/image/mocks/gl2d_fill_trace_order.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"data": [
3+
{
4+
"x": [ 1, 1, 2, 3, 4, 5,5
5+
],
6+
"y": [ 0,100,100,100,100,100,0
7+
],
8+
"type": "scattergl",
9+
"fill": "tozeroy",
10+
"mode": "markers+lines",
11+
"showlegend": false,
12+
"fillcolor": "#f02f20",
13+
"line": { "color": "#f01f10" }
14+
},
15+
{
16+
"x": [ 1, 2, 2, 3, 4, 4,5
17+
],
18+
"y": [ 0, 0,200,200,200, 0,0
19+
],
20+
"type": "scattergl",
21+
"fill": "tozeroy",
22+
"mode": "none",
23+
"showlegend": false,
24+
"fillcolor": "#90ff70",
25+
"line": { "color": "#90ff70" }
26+
27+
}
28+
],
29+
"layout": {
30+
"margin": {"l": 100, "r": 100, "t": 100, "b": 100},
31+
"yaxis": { "title": "Y axis 2 ", "type": "linear", "rangemode": "tozero", "nticks": 3 }
32+
}
33+
}

0 commit comments

Comments
 (0)