How to use declared variables in html section?

Question

I'm trying to build a directed line graph in D3 with the ability to use a linear scale in D3 with domain [-1,0,1] and range ["red","yellow","green"] to set the color of edges as a representation of speed between nodes. I am new to D3, JS, and programming in general, so I'm sure I'm missing something obvious, but is there a way that I can call the values in this color array:

var color = d3.scale.linear()
.domain([-1, 0, 1])
.range(["red", "yellow", "green"]);

Within the style section where I declare the actual colors of the lines? Example of what I've tried, where I've declared 10 link types and I'm trying to pass a color element into them.:

path.link.onezero {
    stroke: color(-0.5);
} 

Does not work, and returns a blank line. path.link.twozero { stroke: #000; } Does work, and returns a black line.

Obviously, I'm probably attacking this problem the wrong way and would like to be able to create these lines without having to resort to discrete declarations of style elements within the style section, but rather have one style element with the style section and have its properties determined dynamically by my script - I just have no idea how to do this.

Thank you!

Answer 1

You have to call color function inside javascript code as shown below.

d3.selectAll("path.link.onezero")
   .style("stroke",color(-0.5));