角度 d3 无法使用 *ngFor 唯一呈现

Question

i am trying to implement angular-d3-donut to my web application. each has one SVG(donut) . so if i generate using *ngFor there'll be multiple with one SVG(donut). but problem is that, if i try to generate multiple by *ngFor, only one is creating and multiple SVG(donut) nesting inside the single . so i am getting design mismatching and different result.

HTML

<div class="row">
    <div class="col-md-3" *ngFor="let x of [1,2,3,4]; let myIndex = index">
         <angular-d3-donut  [data]="donutChartData" [outerRadius]=60 [innerRadius]=20 [spreadSlice]=true [iconWidth]=20 [iconHeight]=20 ></angular-d3-donut>
    </div>
</div>

Component.ts

public donutChartData = [{
        id: 0, // number
        label: 'A',  // string
        value: 70,  // number
        color: '#ccc',  // string,
        iconImage: 'https://avatars.discourse.org/v2/letter/a/a8b319/45.png' // string
    }, {
        id: 1, // number
        label: 'B',  // string
        value: 30,  // number
        color: '#DA4F49',  // string,
        iconImage: 'https://avatars.discourse.org/v2/letter/a/a8b319/45.png' // string
    }
]

Inspected HTML Output

Answer 1

I think the problem is that you are plotting in the same "dountChart" div each time. If you want to create a new div, you need to change the id of each "dountChart". For instance, let's suppose I want to plot multiple circles (your dount charts) so I have this HTML:

<div *ngFor="let item of options.items; index as i">
    <angular-d3-donut [index]="i"></angular-d3-donut>
</div>

Let's say that item is my dummy data. If you pass the index i to your angular-d3-donut component you can use it to identify your multiple DOM elements

@Component
({
    selector: 'angular-d3-donut',
    templateUrl: './angular-d3-donut.component.html',
    styleUrls: ['./angular-d3-donut.component.css']
})

export class AngularD3Donut implements OnInit 
{
    private circle: any; // Is Circle class
    private container: any; // div
    @Input() public index: number = 0;
    @Input() public height: number = 20;
    public color: string = 'black';

    constructor() {}
    ngOnInit(): void 
    {
        this.container = d3.select('#dountChart') // First select the original id
            .attr('id', 'dountChart' + this.index) // Now, change the id to make it unique
            .style('height', this.height.toString() + "px")
            .style('background-color', 'red');

        this.circle = new Circle(10, this.color, 10, 10, this.index); // Circle(radius, 'color', coor_x, coor_y, index)
    }
}

class Circle
{
    private container: any; //svg
    private circle: any;

    constructor(private radius: number, private color: string, private x: number, private y: number, private index: number)
    {
        this.container = d3.select('#circle') // First, select the original id
            .attr('x', this.x)
            .attr('y', this.y)
            .attr('height', this.radius * 2)
            .attr('id', 'circle'+this.index); // Now, change the id to make it unique

        this.circle = this.container.append('circle')
            .attr('cx', this.x)
            .attr('cy', this.y)
            .attr('r', this.radius)
            .style('fill', this.color);
    }
}

And the html component of AngularD3Donut is:

<div id='dountChart'>
    <svg id='circle'></svg>
</div>

If you change the id each time, then the original id always will be the next element in the iteration