在两个地方渲染 d3 图表会使它在第一个区域渲染两次？

Question

我试图在我的网页上用两个单独的垫卡显示两个单独的 d3 饼图，但它们显示在我代码中第一个 d3 图表的 svg 标签中。

我的代码：

<section class="three">
  <!-- Card 1 -->
  <div fxLayout="row" fxLayoutGap="10px">
  <mat-card class="child-card">
    <mat-card-content class="card-grid">
      <app-d3-donut class="card-grid-graph"></app-d3-donut>
    </mat-card-content>
  </mat-card>
  <!-- Card 2 -->
  <mat-card class="child-card">
    <mat-card-content class="card-grid">
      <app-apex [type]="'type1'" class="card-grid-graph"></app-apex>
    </mat-card-content>
  </mat-card>
  <!-- Card 3 -->
  <mat-card class="child-card">
    <mat-card-content class="card-grid">
      <app-d3-donut class="card-grid-graph"></app-d3-donut>
    </mat-card-content>
  </mat-card>
</div>
</section>

我在 app-d3 组件中配置的两个 d3 图表都像这样显示在第一张卡片中；

这是因为我的 d3 图表配置错误还是其他原因？

Answer 1

问题肯定是您在自定义组件中使用了 d3.select('svg') 或 d3.select('app-d3-donut')。 d3.select 是 document.querySelector 的包装器，它匹配 它找到的第一个元素 .

您需要确保这不是从 document 中看到的第一个 SVG 元素，而是从自定义组件中看到的第一个元素。也就是说 - 你需要确保每个 Angular 组件只能查看和修改它自己的内部 HTML.

从 the source, d3.select also accepts HTML elements. So you should use Angular's ViewChild 获取对 SVG 元素的引用，然后将该引用传递给 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
  }
}

在两个地方渲染 d3 图表会使它在第一个区域渲染两次？

Rendering a d3 chart in two places makes it render twice in the first area?

javascript

d3.js

angular