强制布局中的 D3 CSS 自定义颜色

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。