Nested circles in d3

Question

Using d3.js, how would I modify the following code to add nested radiused "inner_radius" filled with a yellow circle for each existing generated circles:

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

As imran said in his comment, you will want to combine the circles in the g element svg. You can see the updated code here with the corresponding changes below.

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