在d3 Pie Angular中添加图例

时间:2019-12-23 05:56:50

标签: angular d3.js

我需要在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

0 个答案:

没有答案