d3.js - 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");