4

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

1 に答える 1

4

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");
于 2013-04-01T18:25:43.840 に答える