嵌套圓圈D3

Question

使用d3.js，我會如何修改以下code到半徑「inner_radius」的嵌套，黃色實心圓添加到每個現有的生成圈：

var circleData = [ 
    { "cx": 300, "cy": 100, "radius": 80, "inner_radius": 40}, 
    { "cx": 75, "cy": 85, "radius": 50, "inner_radius": 20}]; 

var svgContainer = d3.select("body").append("svg") 
            .attr("width",500) 
            .attr("height",500); 

var circles = svgContainer.selectAll("circle") 
          .data(circleData) 
          .enter() 
          .append("circle"); 

var circleAttributes = circles 
         .attr("cx", function (d) { return d.cx; }) 
         .attr("cy", function (d) { return d.cy; }) 
         .attr("r", function (d) { return d.radius; }) 
         .style("fill", function (d) { return "red"; }); 

Answer 1

由於imrane在他的評論中說，你會想要將這些圈子分組在一個g svg元素中。您可以在下面看到相關更改的更新代碼here。

var circles = svgContainer.selectAll("g") 
          .data(circleData) 
          .enter() 
          .append("g"); 
// Add outer circle. 
circles.append("circle") 
     .attr("cx", function (d) { return d.cx; }) 
     .attr("cy", function (d) { return d.cy; }) 
     .attr("r", function (d) { return d.radius; }) 
     .style("fill", "red"); 
// Add inner circle. 
circles.append("circle") 
     .attr("cx", function (d) { return d.cx; }) 
     .attr("cy", function (d) { return d.cy; }) 
     .attr("r", function (d) { return d.inner_radius; }) 
     .style("fill", "yellow");