javascript - 尝试使用 d3 在圆上绘制圆弧

Question

想画一个带有同心圆弧的圆。使用D3 。这就是我到目前为止所拥有的，我不知道如何让它们相互对齐。这是目前的一支笔 pen .

    var h = 138;
    var w = 300;
    var svgProfile = d3.select(".profileWidget p").append("svg").attr("width", w).attr("height", h);
    var dataset = [25];
    var circles = svgProfile.selectAll("circle").data(dataset).enter().append("circle");
    circles.attr("cx", function(d, i) {
            return (i * 50) + 150;
        }).attr("cy", h / 2).attr("r", function(d) {
            return d * 2;
        }).attr("fill", "#6a9b16")
        .attr("stroke", "#2B303B")
        .attr("stroke-width", function(d) {
            return d / 2;
        });
    var svg = d3.select(".profileWidget p")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .append("g")
        .attr("transform", "translate(110,1)");

    var arc = d3.svg.arc()
        .innerRadius(50)
        .outerRadius(70)
        .startAngle(0)
        .endAngle(1.3 * Math.PI);

    svg.append("path")
        .attr("class", "arc")
        .attr("d", arc)
        .attr('fill', '#1bc');

Answer 1

伙计，你可以使用弧2来选择第一条弧，

var svg2 = d3.select("svg")
.append("svg")
.attr("width", 200)
.attr("height", 200)
.append("g")
.attr("transform", "translate(100,100)");

给你做了一支笔:http://codepen.io/anon/pen/VevaZg