D3 CSS Пользовательские цвета в силе Layout

Question

Я работаю над направленным движением макетом. Когда я впервые начал с этого, у меня были цвета, определенные в CSS, и он отлично работал. Где-то по пути я решил попробовать встроенную цветовую гамму D3, но когда я попытался вернуться к своим пользовательским цветам CSS, код больше не будет работать без линии цветового масштаба. Как-то я «застрял» с масштабом d3 - строка 4 этого кода: https://jsfiddle.net/lilyelle/gwacm7z5/

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

Я знаю, что мой CSS работает, потому что мой указатель событий команда работает - но как-то в остальной части CSS не будет примените цвет к моим элементам. Может ли кто-нибудь помочь избавиться от шкалы d3 и вернуться к регулярному стилю CSS?

Спасибо!

Answer 1

Вы CSS должны быть:

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

А потом при создании кругов:

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

Обновлено fiddle.