javascript - 用数组数据绘制圆弧

Question

我可以画这样的弧:

    this.arc = D3['arc']()
        .innerRadius(200)
        .outerRadius(250)
        .startAngle(0)
        .endAngle(Math.PI);

    this.canvas = D3.select("#simpleChart").append("svg")
        .attr("width", Number((self.data[this.site].w + 50)))
        .attr("height", Number((this.data[this.site].h + 50)))
        .attr("style", "outline: thin solid red;");
    let arcTest = this.canvas.append('g')
        .attr('class', 'testtest');

    arcTest.append('path')
        .attr('d', this.arc);

但是，我尝试绑定(bind)数据来绘制多个圆弧，但无法使其工作:

let p = Math.PI * 2
let arcData = [
        [{
            startAngle: 0,
            endAngle: 1.25
        }],
        [{
            startAngle: 2,
            endAngle: 3.25
        }]
    ] //i also tried it with just an array of obj [{},{}]

this.arc = D3['arc']()
    .innerRadius(200)
    .outerRadius(250)
    .startAngle(function(d) {
        return d.startAngle
    })
    .endAngle(function(d) {
        return d.endAngle
    });


let arcTest = this.canvas.append('g')
    .attr('class', 'testtest')
    .attr('transform', 'translate(200,200)');



arcTest.selectAll(".entranceArc")
    .data(this.arcData)
    .attr("d", this.arc)
    .enter()
    .append("path")
    .attr('class', 'entranceArc')
    .attr("fill", "none")
    .attr("stroke", "black");

我错过了什么？

Answer 1

您必须在附加路径之后设置d属性。

所以，而不是:

arcTest.selectAll(".entranceArc")
    .data(this.arcData)
    .attr("d", this.arc)
    .enter()
    .append("path")
    .attr('class', 'entranceArc')
    .attr("fill", "none")
    .attr("stroke", "black");

应该是:

arcTest.selectAll(".entranceArc")
    .data(this.arcData)
    .enter()
    .append("path")
    .attr("d", this.arc)
    .attr('class', 'entranceArc')
    .attr("fill", "none")
    .attr("stroke", "black");

这是一个演示:

let p = Math.PI * 2
let arcData = [{
    startAngle: 0,
    endAngle: 1.25
}, {
    startAngle: 2,
    endAngle: 3.25
}];

let arc = d3.arc()
    .innerRadius(100)
    .outerRadius(150)
    .startAngle(function(d) {
        return d.startAngle
    })
    .endAngle(function(d) {
        return d.endAngle
    });

let svg = d3.select("body")
    .append("svg")
    .attr("width", 400)
    .attr("height", 400);

let group = svg.append("g")
    .attr("transform", "translate(200,200)")

let arcTest = group.selectAll(".entranceArc")
    .data(arcData)
    .enter()
    .append("path")
    .attr("d", arc)
    .attr('class', 'entranceArc')
    .attr("fill", "none")
    .attr("stroke", "black");

<script src="https://d3js.org/d3.v4.min.js"></script>