[Solved]-Rendering a d3 chart in two places makes it render twice in the first area?-d3.js

The problem is definitely that you use d3.select('svg') or d3.select('app-d3-donut') in your custom component. d3.select is a wrapper around document.querySelector, which matches the first element it finds.

You need to make sure that this is not the first SVG element as seen from the document, but the first element as seen from the custom component. That is - you need to make sure that each Angular component can only look at and modify its own inner HTML.

From the source, d3.select also accepts HTML elements. So you should use Angular's ViewChild to get a the reference to the SVG element, and then pass that reference to d3.

@Component({
  selector: 'app-d3-donut',
  template: `
    <svg #chartEl></svg>
  `
})
class AppD3DonutComponent {
  @ViewChild('chartEl') svgElement: ElementRef;

  ngAfterViewInit() {
    d3.select(this.svgElement.nativeElement).append('g') // etc
  }
}