Setting background property to a gradient breaks brushing "effect"

[jmgelman]

In my app, I want to use a gradient for the background of the plot. I do this by using the -webkit-linear-gradient function:

$('.parcoords').css("background", "-webkit-linear-gradient(top, " + color1 + "," + color2 + ")");

Where color1 and color2 are strings containing the hex representation of the color.

Unfortunately, after doing this, if I try to brush solutions in the plot...the visual effect of making the brushed out polylines faded away (i.e., somewhat transparent) doesn't occur. I suspect this is due to the code in d3.parcoords.js beginning at line 695.

Is there any modification I can make so this will work, without breaking the rest of the CSS?

Here's a fiddle of what I currently have. Note that I did remove the background: white statement from the CSS for the parcoords class. Otherwise, the entire plot area became white when brushing began.

https://jsfiddle.net/jmg157/nofzytj0/

[syntagmatic]

It may have to do with fillRect statement somewhere. Possibly this one: https://github.com/syntagmatic/parallel-coordinates/blob/master/d3.parcoords.js#L701