javascript - D3 CSS Custom Colors in Force Layout -

i'm working on force directed layout. when first started on this, had colors defined in css , worked great. somewhere along way decided try built-in d3 color scale, when tried go custom css colors, code doesn't run without color scale line anymore. somehow i'm "stuck" d3 scale - line 4 of code: https://jsfiddle.net/lilyelle/gwacm7z5/

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

i know css working because pointer-events command working - somehow rest of css not apply color elements. can getting rid of d3 scale , returning regular css styling???

thank you!

you css should be:

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

and when creating 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.