javascript - Change color of Circles on D3 Packing -

i want change color of individual nodes in circle packing visualization. colors in each "d" object color. when try , use fill attribute , return d.color text changes , not actual node itself. specific nodes have different colors.

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 + ")"; }); 

two things:

first, need set on circle , not g element.

second, css fill property in base style take precedence on attribute fill. use:

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