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

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

1 个答案: