Angular 在d3饼图中添加图例

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

这是否回答了您的问题@SelakaN，我已经试过了，但是没有显示出来。你能在stackblitz上创建一个示例演示吗？这里的这一点将删除你为图表绘制的所有路径

this.mainContainer.selectAll（“路径”）.remove（）