nested circles in d3

d3.js

Solution

As imrane said in his comment, you will want to group the circles together in a `g` svg element. You can see the updated code here with relevant 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");

Problem

Using d3.js, how would I modify the following code to add a nested, yellow-filled circle of radius "inner_radius" to each of the 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"; }); ```

Original source