search

syntagmatic / parallel-coordinates

A d3-based parallel coordinates plot in canvas. This library is no longer actively developed.
http://syntagmatic.github.com/parallel-coordinates/
Other
511 stars 212 forks source link

Setting background property to a gradient breaks brushing "effect" #323

Open jmgelman opened 7 years ago

jmgelman commented 7 years ago

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 commented 7 years ago

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