New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

scattergl fillcolor incorrect with multiple polygons in same trace when with `fill: toself` #2291

Open
cpsievert opened this Issue Jan 24, 2018 · 13 comments

Comments

Projects
None yet
7 participants
@cpsievert

cpsievert commented Jan 24, 2018

https://codepen.io/cpsievert/pen/ZvNqjQ

Note that fillcolor renders correctly when type: scatter.

@jackparmer

This comment has been minimized.

Contributor

jackparmer commented Jan 24, 2018

cc @Kully - this is going to be an issue with the Python county choropleth as well. Probably watch this issue and hold off on the WebGL approach until this is fixed:

image

@Kully

This comment has been minimized.

Collaborator

Kully commented Jan 24, 2018

I actually found that toself fill didn't work with just one polygon (ie list of coordinates defining a contained polygon)

But I only checked in the Python API

@jackparmer

This comment has been minimized.

Contributor

jackparmer commented Jan 26, 2018

Here is what I get for a full US county map for SVG vs WebGL using toself:

image

@alexcjohnson

This comment has been minimized.

Contributor

alexcjohnson commented Mar 8, 2018

related: #2450

@Kully

This comment has been minimized.

Collaborator

Kully commented May 28, 2018

Another example of the USA choropleth from here: https://plot.ly/python/county-choropleth/#the-entire-usa This is switching scatter -> scattergl in the figurefactory.

screen shot 2018-05-28 at 12 07 32 pm

@jackparmer

This comment has been minimized.

Contributor

jackparmer commented May 28, 2018

⬆️ Doesn't look like the recent scattergl fill changes fixed things for this particular use case

@etpinard

This comment has been minimized.

Member

etpinard commented May 28, 2018

Doesn't look like the recent scattergl fill changes fixed things for this particular use case

There haven't been any scattergl fill changes since the regl push back January.

@jackparmer

This comment has been minimized.

Contributor

jackparmer commented May 28, 2018

Oh, I thought @dy had done some work on regl-line2d fills after January. I guess I'm misremembering.

@etpinard

This comment has been minimized.

Member

etpinard commented May 28, 2018

He's done some work. But none of which is ready to get merged at this stage.

@dy

This comment has been minimized.

Member

dy commented May 28, 2018

It is coming, after regl-text. Pls stay tuned)

@alexcjohnson

This comment has been minimized.

Contributor

alexcjohnson commented Jul 26, 2018

A nice pared-down reproduction from @llnns in #2845:


Using scattergl with toself fill option results in a "ghost"/wrong/extra fill among the first points of each object. A minimal example creating three rectangles:

https://codepen.io/anon/pen/NBvbbv

Results in:

newplot

Also, using the same data with scatter type has the expected output:

newplot 1

@llnns

This comment has been minimized.

llnns commented Jul 26, 2018

Hey, maybe another hint here:
Using https://codepen.io/anon/pen/NBvbbv as an example.

It seems that the extra triangle comes from the triangulation function earcut. The block at

else if(trace.fill === 'toself' || trace.fill === 'tonext') {
pos = [];
last = 0;
for(j = 0; j < srcPos.length; j += 2) {
if(isNaN(srcPos[j]) || isNaN(srcPos[j + 1])) {
pos = pos.concat(srcPos.slice(last, j));
pos.push(srcPos[last], srcPos[last + 1]);
last = j + 2;
}
}
pos = pos.concat(srcPos.slice(last));
if(last) {
pos.push(srcPos[last], srcPos[last + 1]);
}
}
is generating the follow pos array:

pos = [
  0,
  9,
  0,
  10,
  1,
  10,
  1,
  9,
  0,
  9,
  0,
  9,
  1,
  6,
  1,
  8,
  2,
  8,
  2,
  6,
  1,
  6,
  1,
  6,
  2,
  1,
  2,
  2,
  3,
  2,
  3,
  1,
  2,
  1,
  2,
  1
]

That it is been pass to earcut function as earcut(pos, []) (I think at: https://github.com/a-vis/regl-line2d/blob/d4e34d3d38b20fce5bc0398e3cf30181d1f506a0/index.js#L519 ) resulting in the follow triangles indices array:

triangles = [
  15,
  14,
  13,
  9,
  8,
  7,
  3,
  2,
  1,
  4,
  3,
  1,
  15,
  13,
  12,
  6,
  0,
  12,
  7,
  10,
  9
]

Notice that the result has 21 indices, 7 triangles, one more than the 6 needed for the 3 rectangles example. Also, I am not sure if it is intended, but in the pos array the last position of each rectangle is duplicated.

@etpinard

This comment has been minimized.

Member

etpinard commented Sep 19, 2018

A very nice example from @ErwanMAS in #3025


Please look .

https://codepen.io/erwanmas/pen/dqQrbR

The issue is generated by https://github.com/mapbox/earcut in https://github.com/a-vis/regl-line2d . AND earcut doesn't guarantee correctness

https://github.com/mapbox/earcut/blob/master/README.md

a simple console.log here https://github.com/a-vis/regl-line2d/blob/b9d56d51e1598c4ee7a9a5e0a733e920daf63c2d/index.js#L520 will output only 1 triangle , instead of 2 triangles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment