javascript - 强制布局中的 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 正在工作，因为我的 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));

已更新 fiddle .