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

d3中的嵌套圆圈

1 个答案: