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')

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

<强>杆chart.component.html

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

<强>杆chart.component.ts

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

<强> Modified Plunker

表格内的D3图表（角度2）

1 个答案: