Javascript 用数组数据绘制圆弧

我可以这样画一条弧：

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

但是，我尝试绑定数据以绘制多个圆弧，但无法使其工作：

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

---

我缺少什么？

您必须在添加路径后设置

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

下面是一个演示：

设p=Math.PI*2
设arcData=[{
startAngle:0，
端角：1.25
}, {
startAngle:2，
端角：3.25
}];
设arc=d3.arc（）
.内半径（100）
.外层（150）
.startAngle（功能（d）{
返回d.startAngle
})
.端角（功能（d）{
返回d.端角
});
让svg=d3.select（“body”）
.append（“svg”）
.attr（“宽度”，400）
.attr（“高度”，400）；
让group=svg.append（“g”）
.attr（“转换”、“翻译（200200）”）
让arcTest=group.selectAll（“.enterArc”）
.数据（arcData）
.输入（）
.append（“路径”）
.attr（“d”，弧）
.attr（'类'，'入口弧'）
.attr（“填充”、“无”）
.attr（“笔划”、“黑色”）