angular - D3 表格内图表( Angular 2)

Question

我需要在表格内显示 d3 条形图。表行是动态的，我使用 ngFor 动态创建行。由于某种原因，图表没有显示。请看一下这个笨蛋。 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

条形图.component.ts

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

<强> Modified Plunker