CODEWITHSUNDEEP
d3.js
balazs
balazs

Reputation: 520

nested circles in d3

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

Upvotes: 5

Views: 5309

Answers (1)

Brant Olsen
Brant Olsen

Reputation: 5664

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

Upvotes: 5

Related Questions