D3 CSS пользовательские цвета в макете Force

Question

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

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

Я знаю, что мой CSS работает, потому что моя команда pointer-events работает - но каким-то образом остальная часть 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));

Обновленная скрипка.