0
155
Views¿Representar un gráfico d3 en dos lugares hace que se represente dos veces en la primera área?
Estoy tratando de mostrar dos gráficos circulares d3 separados en mi página web en dos tarjetas mat separadas, pero se muestran en la etiqueta svg del primer gráfico d3 en mi código.
Mi código:
<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>Tanto mis gráficos d3 como los que tengo configurados en mi componente app-d3 se muestran en la primera tarjeta así;
¿Esto se debe a que configuré mal mi gráfico d3 o por alguna otra razón?
1 answers
Answer question0
El problema es definitivamente que usa d3.select('svg') o d3.select('app-d3-donut') en su componente personalizado. d3.select es un contenedor alrededor de document.querySelector , que coincide con el primer elemento que encuentra .
Debe asegurarse de que este no sea el primer elemento SVG que se ve en el document , sino el primer elemento que se ve en el componente personalizado. Es decir, debe asegurarse de que cada componente Angular solo pueda ver y modificar su propio HTML interno.
Desde la fuente , d3.select también acepta elementos HTML. Por lo tanto, debe usar ViewChild de Angular para obtener una referencia al elemento SVG y luego pasar esa referencia a 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 } }