0

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!

Huangism
  • 16,278
  • 7
  • 48
  • 74
aschaefer
  • 35
  • 1
  • 1
  • 7

1 Answers1

0

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

d3.selectAll("path.link.onezero")
   .style("stroke",color(-0.5));
Gilsha
  • 14,431
  • 3
  • 32
  • 47
  • Thank you for the answer! I inserted this into my code and for some reason it's not modifying the path.link.onezero element to take that color value. I tried using .style("stroke",color(-0.5)); as well, to no avail. – aschaefer Nov 11 '14 at 13:40
  • Problem was with the selector. Updated the answer. Try now. – Gilsha Nov 11 '14 at 13:44
  • You don't need the additional filter, just do `d3.selectAll("path.link.onezero")`. – Lars Kotthoff Nov 11 '14 at 13:46
  • For some reason, it still isn't placing the stroke data into the style element. If I nullify the entire element and just declare it in the style section: path.link.onezero{ } It just returns no line even when I select it within the JS properly as you've shown me how to do and declare the color either as an element of my color array or as a specific color (say, #F00 or just "red"). – aschaefer Nov 11 '14 at 13:58
  • Check this [fiddle](http://jsfiddle.net/n25qcyk5/1/) and confirm your path element has both the classes you mentioned as in the fiddle. – Gilsha Nov 11 '14 at 14:02
  • I don't have classes, I simply have 10 different path.link.onezero, path.link.twozero, etc. declared in the style section of the HTML where I specified colors of each link type before I tried doing the color selection dynamically. I'll try to restructure my code similar to the way you've set up that fiddle and see if I can get it worked out. I appreciate both of your help :) – aschaefer Nov 11 '14 at 14:07