表内 D3 图表（角度 2）

Question

我需要在表格中显示 d3 条形图。表行是动态的，我使用 ngFor 动态创建行。由于某种原因，图表未显示。请看一下plunk。 https://plnkr.co/edit/IIfkLYS4iFlcj7d7SGlO?p=preview

<tr *ngFor="let item of itemsList">
            <td>{{item.firstName}}</td>
            <td>{{item.lastName}}</td>
            <td><bar-chart [chartData]="item.cData"></bar-chart></td>
          </tr>

表格上方的条形图显示良好。但是表格中重复的图表是没有显示的。

我还检查了如果我注释掉表格上方的条形图，那么表格第一行的图表会显示，但第二行的图表不会显示。 在这方面请求您的帮助？如果我在这里遗漏了什么，请告诉我。

Answer 1

你总是使用类chart的第一个元素

const chart = d3.select('.chart')

为了区分每个图表，我会执行以下操作：

bar-chart.component.html

<svg class="chart" #chart></svg> // add #chart

bar-chart.component.ts

@ViewChild('chart') chart: ElementRef;
...
const chart = d3.select(this.chart.nativeElement);

Modified Plunker