两处调用app-d3-donut组件时d3图表均渲染在首个mat-card区域的问题

你贴的页面模板代码没有问题，问题出在app-d3-donut组件的内部实现。

核心原因 #

• 最常见的诱因是组件内使用了全局DOM选择器：如果你在app-d3-donut里调用d3.select('svg')、d3.select('.图表类名')或者按固定id选择元素，d3会默认匹配整个页面中第一个符合条件的元素，所有组件实例的渲染逻辑都会指向第一个svg标签，就会出现多图叠加在第一张卡片的问题。
• 次要排查点：如果组件内给svg设置了固定id，页面出现重复id时浏览器也只会匹配第一个id对应的元素，也会引发同样问题。

修复方案 #

1. 组件内限定DOM选择范围
   你当前用的是Angular技术栈，在app-d3-donut组件中注入ElementRef获取当前组件的根DOM节点，所有d3选择操作都基于当前组件的根节点执行，不会跨组件匹配元素，示例代码：

// app-d3-donut.component.ts
import { Component, ElementRef, OnInit } from '@angular/core';
import * as d3 from 'd3';

@Component({
  selector: 'app-d3-donut',
  template: `<div class="donut-wrap"></div>`
})
export class D3DonutComponent implements OnInit {
  // 注入当前组件的DOM引用
  constructor(private hostEl: ElementRef) {}

  ngOnInit() {
    // 仅在当前组件的DOM范围内选择元素，不会匹配到其他组件的节点
    const host = d3.select(this.hostEl.nativeElement);
    const donutWrap = host.select('.donut-wrap');
    // 后续svg创建、饼图渲染全基于donutWrap操作即可
    const svg = donutWrap.append('svg')
      .attr('width', 300)
      .attr('height', 300);
    // 原有饼图渲染逻辑...
  }
}

2. 避免使用固定id
   如果必须给svg设置id，要给每个组件实例生成唯一id，比如用随机字符串、时间戳拼接，或者通过父组件传入唯一标识参数。
3. 样式校验
   完成上面两步后如果还有问题，检查child-card、card-grid-graph的样式规则，确认第二张app-d3-donut所在的卡片没有被隐藏或者布局偏移。

内容的提问来源于stack exchange，提问作者Steve Chacko