我試圖在我的網頁上以兩個單獨的墊卡顯示兩個單獨的 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 圖表配置錯誤還是其他原因？
uj5u.com熱心網友回復：
問題肯定是您使用d3.select('svg')或d3.select('app-d3-donut')在您的自定義組件中。d3.select是一個包裝器document.querySelector，它匹配它找到的第一個元素。
您需要確保這不是從 看到的第一個 SVG 元素document，而是從自定義組件看到的第一個元素。也就是說——你需要確保每個 Angular 組件只能查看和修改它自己的內部 HTML。
從源代碼，d3.select也接受 HTML 元素。因此，您應該使用Angular 的 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
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/376243.html
標籤：javascript 有角的 d3.js