在D3包装上更改圆圈的颜色

Question

我想更改圆形包装可视化中各个节点的颜色。颜色在每个“D”对象中作为颜色。当我尝试使用fill属性并返回d.color时，只会更改文本而不是实际节点本身。特定节点具有不同的颜色。

circle {
fill: blue;
fill-opacity: .25;
stroke: #0066FF;
stroke-width: 1px;
}

.leaf circle {
 fill: yellow;
 fill-opacity: 1;
 }

 var node = svg.datum(root).selectAll(".node")
  .data(pack.nodes)
.enter().append("g")
  .attr("fill", function(d) {return d.color})
  //.attr("class", function(d) { return d.children ? "node" : "leaf node"; })
  .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });

Answer 1

两件事：

首先，您需要在circle而不是g元素上进行设置。

其次，基本样式中的CSS填充属性将优先于属性填充。所以使用：

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .style('fill', function(d) {return d.color});