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

【问题标题】：angular d3 not rendering uniquely with *ngFor角度 d3 无法使用 *ngFor 唯一呈现
【发布时间】：2018-03-01 11:03:47
【问题描述】：

我正在尝试在我的 Web 应用程序中实现 angular-d3-donut。每个都有一个 SVG(donut)。因此，如果我使用 *ngFor 生成，将有多个带有一个 SVG（甜甜圈）。但问题是，如果我尝试通过 *ngFor 生成多个，只有一个正在创建，多个 SVG(donut) 嵌套在单个中。所以我得到了设计不匹配和不同的结果。

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
    }
]

检查的 HTML 输出

【问题讨论】：

如果手动创建循环会发生什么，即如果您在页面上堆叠 4 个圆环图？你得到同样的结果吗？
@Safiyya 创建了 4 个甜甜圈图表，但所有甜甜圈都在一个中。我需要根据代码 sn-ps 看到四个带有单个甜甜圈的。
我明白了。我试图查看问题是在 angular-d3 库中还是在您的代码中。你可以在 stackblitz 中重新创建它吗？
@Safiyya ，我也面临类似的问题。我想要一个关于图像特定位置的饼图，但它没有出现stackblitz.com/edit/angular-git3mo?file=src/app/…

标签： javascript angular d3.js svg

【解决方案1】：

我认为问题在于您每次都在同一个“dountChart”div 中进行绘图。如果你想创建一个新的div，你需要改变每个“dountChart”的id。例如，假设我想绘制多个圆圈（你的圆点图），所以我有这个 HTML：

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

假设item 是我的虚拟数据。如果您将索引 i 传递给您的 angular-d3-donut 组件，您可以使用它来识别您的多个 DOM 元素

@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);
    }
}

而AngularD3Donut的html组件是：

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

如果每次都改变id，那么原来的id总是会是迭代中的下一个元素

【讨论】：