Динамический компонент круговой диаграммы D3 в Angular

У меня есть многоразовый компонент круговой диаграммы D3 в Angular, который я использую в 3 местах на одной странице. Проблема в том, что повторно используемый компонент круговой диаграммы отображает круговую диаграмму только один раз, а не в двух других местах. Я вижу, что svg создается в двух других местах, но диаграмма не отображается. Он показывает только один раз. Ниже то, что у меня есть:

HTML

<div id="pieChartCointainer">
    <svg></svg>
</div>

Машинопись:

  ngOnChanges(changes: SimpleChanges): void{
    if(this.pieChartData.testData){
      this.chartRender();
    }
  }
  chartRender() {
    /* Pie Chart */
    
    this.svg = d3.select("#pieChartCointainer").select("svg");
    this.svgLegend = this.svg
      .append("rect")
      .attr("class", "mainLegend")
      .attr("transform", `translate(${this.radius},${this.radius})`)
      .text("Main legend text");

    this.setSVGDimensions();

    this.mainContainer = this.svg
      .append("g")
      .attr("transform", `translate(${this.radius},${this.radius})`);

    this.pie = d3
      .pie()
      .sort(null)
      .value((d: any) => d.value);
    this.draw();
  }

  private setSVGDimensions() {
    this.radius = Math.min(this.donutWidth, this.donutHeight) / 2;
    this.svg.attr("width", 2 * this.radius).attr("height", 2 * this.radius);
    this.svg
      .select("g")
      .attr("transform", "translate(" + this.radius + "," + this.radius + ")");
  }

  private draw() {
    this.setArcs();
    this.drawSlices();
  }

  private setArcs() {
    this.arc = d3
      .arc()
      .outerRadius(this.radius)
      .innerRadius(this.radius * 0.850);
  }
  
  private drawSlices() {
    var color = d3.scaleOrdinal()
      .domain(this.pieChartData.testData.map(d => d.name))
      .range(this.pieChartData.chartAxisColours)
    
    this.slices = this.mainContainer
      .selectAll("path")
      .remove()
      .exit()
      .data(this.pie(this.pieChartData.testData))
      .enter()
      .append("g")
        .append("path")
          .attr("d", this.arc)
          .attr("fill", (d, i) => color(i))

      .on("mouseover", function(d) {
        d3.select("#tooltip")
          .style("opacity", 1)
          .select("#value")
          .text(d.data);
      })
      .on("mouseout", function() {
        d3.select("#tooltip").style("opacity", 0);
      });

    this.svgLegend
      .attr("fill", "tranparent")
      .attr("fill", function(d, i) { return color(i); } )
      .data(this.pieChartData.testData)
      .append("rect") // make a matching color rect
      .attr("class", "pieLegend")
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", (d, i) => color(i))

    // append the text element
    this.svgLegend
      .data(this.pie(this.pieChartData.testData))
      .append("text") // add the text
      .attr("fill", (d, i) => color(i))
      .text(d => d.data.name)
      .style("font-size", 12)
      .attr("y", 10)
      .attr("x", 11);
  }

Я попытался реализовать это решение (круговая диаграмма многократного использования d3.js с динамическим обновления ), но, к сожалению, я не смог сделать это правильно.

Пожалуйста, не могли бы вы помочь мне повторно использовать и отображать компонент круговой диаграммы D3. Спасибо