d3.js - d3中的嵌套圆圈

Question

使用 d3.js，我将如何修改以下代码以将半径为“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 在他的评论中所说，您将希望将圆圈组合在一个gsvg 元素中。您可以在此处查看更新后的代码 以及下面的相关更改。

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