此d3饼图未显示图例,甚至尝试给出position:absolute
但仍未显示。
但是在控制台中,它仅显示数据的第一个值。
this.svg = d3.select("#airlineChart").select("svg");
this.svgLegend = this.svg.append("div").attr("class", "mainLegend")
.attr("transform", `translate(${this.radius},${this.radius})`);
this.mainContainer = this.svg
.append("g")
.attr("transform", `translate(${this.radius},${this.radius})`);
this.slices = this.mainContainer
.selectAll("path")
.remove()
.exit()
.data(this.pie(this.airline_tonnage))
.enter()
.append("g")
.append("path")
.attr("d", this.arc)
.attr("fill", (d, i) => this.color(i));
this.svgLegend
.data(this.airline_tonnage)
.append("rect") // make a matching color rect
.attr("class", "pieLegend")
.attr("width", 10)
.attr("height", 10)
.attr("fill", (d, i) => this.color(i))
.attr("stroke", "black")
.style("stroke-width", "0px");
// append the text element
this.svgLegend
.data(this.pie(this.airline_tonnage))
.append("text") // add the text
.text(d => d.data.name)
.style("font-size", 12)
.attr("y", 10)
.attr("x", 11);
B我的头,是什么原因隐藏了这个传说。 任何解决方案。