D3 CSS Custom Colors in Force Layout

Question

I'm working on a force directed layout. When I first started on this, I had the colors defined in CSS and it worked great. Somewhere along the way I decided to try the built-in D3 color scale, but when I tried to go back to my custom CSS colors, the code doesn't run without the color scale line anymore. Somehow I'm "stuck" with the d3 scale - line 4 of this code: https://jsfiddle.net/lilyelle/gwacm7z5/

var w = 600,
    h = 500,
    r = 30,
    fill = d3.scale.category10()
 ;

I know my CSS is working because my pointer-events command is working - but somehow the rest of the CSS will not apply color to my elements. Can anyone help with getting rid of the d3 scale and returning to regular CSS styling???

Thank you!

Answer 1

You CSS should be:

.node .type1 {
  fill:#690011;
}
.node .type2 {
  fill:#BF0426;
}

And then when creating your circles:

node.append("circle")
  .attr("r", 35)
  .attr("class", function(d){
    return "node type" + d.type;
   })
  .on("mouseover", fade(.1))
  .on("mouseout", fade(1));

Updated fiddle.