Render gridlines opacity values keeping changing

[louMoxy]

Hi guys, 👋

Bit of an odd issue, the opacity value of the grid lines (horizontal or vertical) appear to be random every time. Here is a fiddle of the issue:

https://jsfiddle.net/vpk5cu9n/

Having a little dig through the code, I am assuming its because it hasn't finished its the transtion on enter, although I can't see an obvious issue with the code: https://dc-js.github.io/dc.js/docs/html/coordinate-grid-mixin.js.html#sunlight-1-line-723

[gordonwoodhull]

Hi @louMoxy, thanks for the report! This is a weird one all right.

It looks like the attribute is overridden by the CSS (attributes < CSS < styles) so we don't see the animations at all.

This code is wrong in a few ways:

• The transition is immediately interrupted, because the next lines merge the selections and then start a new transition. Without naming the transition, it will interrupt the old one
• As noted above, the opacity is overridden by CSS so we never see the transition
• We wouldn't want the opacity to go to 1 because that would be too dark.

Looks like these lines were added in 7c9346a, which animated the axes. Even back then there was a transition on all the grid lines right after, so I guess we have never seen these lines fade in!

If you want to see the fade, you'll have to

• remove the merge in the next line and apply the next transition to lines only (just the update selection). The merge isn't doing any good since all the attributes have been applied.
• remove opacity: 0.5 from the CSS (SCSS, actually, here)
• transition opacity to 0.5 not 1

I'd be happy to take a PR on this!

[louMoxy]

Thanks @gordonwoodhull for the detailed response, I have opened a PR following your instructions.