更改 D3 包装上的圆圈颜色

【问题标题】：Change color of Circles on D3 Packing更改 D3 包装上的圆圈颜色
【发布时间】：2015-05-12 02:50:33
【问题描述】：

我想更改圆形包装可视化中各个节点的颜色。颜色在每个“D”对象中作为颜色。当我尝试使用填充属性并仅返回 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 + ")"; });

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

两件事：

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

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

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

【讨论】：

更改文本颜色非常棒：node.append("title") .text(function(d) { return d.name + (d.children ? "" : ":" + 格式(d.size)); }) .style("color", function(d){return "red"});
@Ben, SVG text 也使用填充：.style('fill', 'red')，当然如果你想让它们都变成红色，我会设置为全局，<style> .node text{ fill: red; } </style>
感谢您的澄清！