<g>属性转换：期望数字，“ translate（NaN，NaN）

Question

我想在Angular中使用d3。

我想要显示具有链接的节点。

当我直接在组件中声明并填充数组时，它就可以工作，但是当我要从http服务器获取元素时，会出现此错误：<g> attribute transform: Expected number, "translate(NaN,NaN)

 listNoeud;
 this.httpService.node.subscribe(item => {
      this.listNoeud = item;
      for (let i = 1; i < this.listNoeud.length; i++) {
          this.nodes.push(new NodeGraph(this.listNoeud[i].id, this.listNoeud[i].label, this.listNoeud[i].type, this.listNoeud[i].statut));
      }
  });

我的NodeGraph模型

export class NodeGraph implements d3.SimulationNodeDatum {
index?: number;
name: string;
statut: string;
x?: number;
y?: number;
vx?: number;
vy?: number;
fx?: number | null;
fy?: number | null;
difficult: string;

id: string;
linkCount: number = 0;

constructor(id, name, difficult, statut) {
    this.id = id;
    this.name = name;
    this.difficult = difficult;
    this.statut = statut;
}
}

当我console.log的节点数组中包含可观察的数据时，我有：

vx: NaN
vy: NaN
x: NaN
y: NaN