D3饼图例未显示

时间:2019-12-27 09:30:28

标签: angular d3.js

此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我的头,是什么原因隐藏了这个传说。 任何解决方案。

0 个答案:

没有答案