我需要在D3饼图中添加图例。
此代码根据需要创建完善的D3饼图。
派
private drawSlices() {
this.slices = this.mainContainer
.selectAll("path")
.remove()
.exit()
.data(this.pie(data))
.enter()
.append("g")
.append("path")
.attr("d", this.arc);
this.slices
.attr("fill", (d, i) => this.color(i))
.attr("stroke", "black")
.style("stroke-width", "0px");
this.slices
.attr("data-legend", function(d){ return d.name})
.attr("data-legend-pos", function(d, i) { return i; })
.append("text")
.attr("transform", function(d) { return "translate(" + this.arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle");
}
尝试添加图例 这是行不通的。
this.slices = this.mainContainer
.selectAll("path")
.remove()
.exit()
.data(this.pie(data))
.enter()
.append("g")
.append("path")
.attr("d", this.arc)
.attr("data-legend", function(d) {
return d.name;
})
.attr("data-legend-pos", function(d, i) {
return i;
})
.attr("transform", function(d) {
return "translate(" + this.arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr("class", "legend")
.attr("transform", "translate(" + 20 + ", 0)")
.style("font-size", "12px");
任何人都可以帮助我如何添加传奇
框架:Angular 8