我可以画这样的弧:
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");
我错过了什么?
最佳答案
您必须在附加路径之后设置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>
关于javascript - 用数组数据绘制圆弧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41254438/