search

anvaka / VivaGraphJS

Graph drawing library for JavaScript
Other
3.75k stars 425 forks source link

give two colors to links #123

Closed richa2008 closed 9 years ago

richa2008 commented 9 years ago

Hi, Can we give two colors to links.I mean half of the link with one color and half with another color. Thank You.

anvaka commented 9 years ago

Vivagraph does not support this. You can try to implement this by following technique described by Mike Bostok here: Gradient Along Stroke but it would probably be very CPU intensive.

ryandmonk commented 8 years ago

Not sure if there’s a better place to post, but I have a fiddle that transforms a svg linear gradient’s start and end positions based on node positions. It’s a little different from Bostock’s version. https://jsfiddle.net/ryandmonk/6eg0y19r/1/

anvaka commented 8 years ago

@ryandmonk :+1:

I also learned a trick to use gradient to have a split color: image

Just add two stops with the same start/stop values in the middle:

  <linearGradient id="grad">
    <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    <stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
  </linearGradient>

fiddle