错误类型错误：无法读取未定义的属性“x1” Cytoscape.js 和 Angular 8 项目

如何解决错误类型错误：无法读取未定义的属性“x1” Cytoscape.js 和 Angular 8 项目

我在 angular 8 项目中使用 cytoscape.js 创建两个不同的图形时遇到了一个奇怪的问题。我在创建所需图形的两种情况下调用了相同的函数。错误堆栈有一行调用'this.cy.layout(this.layout).run()'的行。这是代码

createGraph(...) 函数：

createGraph(data: any,mode: any){
const maxNode = {
  size : '0px',selector : ''
};

if (mode == 'topics'){
  this.addNodes(data,mode);
  this.addEdges(data,mode);

  this.cy.elements().forEach(function(elem: any) {
    if (elem.isNode()){
      console.log(elem.style().width > maxNode.size);
      if (elem.style().width > maxNode.size){
        maxNode.size = elem.style().width;
        maxNode.selector = elem.data().id;
      }
    }
  });

  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  /*this.cy.fit(this.cy.getElementById(maxNode.selector));*/
  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  this.cy.layout(this.layout).run();
}
else{
  this.addNodes(data,mode);

  this.cyJudges.elements().forEach(function(elem: any) {
    if (elem.isNode()){
      console.log(elem.style().width > maxNode.size);
      if (elem.style().width > maxNode.size){
        maxNode.size = elem.style().width;
        maxNode.selector = elem.data().id;
      }
    }
  });

  /*this.cy.center(this.cy.getElementById(maxNode.selector));*/
  this.cyJudges.layout(this.layout).run();
}

}

addNode(...) 函数：

addNodes(data: any,mode: any){
// tslint:disable-next-line:variable-name
const _this = this;
let count = 0;
// tslint:disable-next-line:only-arrow-functions typedef
this.cy.nodes().remove();
if (mode == 'topics'){
  data.forEach(function(elem: any){
    // tslint:disable-next-line:typedef max-line-length
    _this.cy.add({group: 'nodes',data: {id: elem.StandardForm,href: elem.OriginalUri,level: count},position: {x: Math.floor(Math.random() * 600),y: Math.floor(Math.random() * 600)}});
    _this.cy.getElementById(elem.StandardForm).style('width',10 * (data.length - count));
    _this.cy.getElementById(elem.StandardForm).style('height',10 * (data.length - count));

    console.log(data.length,count,elem.StandardForm,10 * (data.length - count));
    count++;

  });
}
else{
  data.forEach(function(elem: any){
    // tslint:disable-next-line:typedef max-line-length
    _this.cyJudges.add({group: 'nodes',href: elem.OriginalUri},y: Math.floor(Math.random() * 600)}});
    _this.cyJudges.getElementById(elem.StandardForm).style('width',10 * (data.length - count));
    _this.cyJudges.getElementById(elem.StandardForm).style('height',10 * (data.length - count));
    count++;

  });
}

}

addEdges(...) 函数：

addEdges(data: any,mode: any){
const _this = this;
this.cy.edges().remove();
if (mode == 'topics'){
  data.forEach(function(elem: any){
    for (let i = 0; i < data.length; i++){
      elem.Topics.forEach(function(topic: any){
        data[i].Topics.forEach(function(innerTopic: any){
          if (elem.StandardForm != data[i].StandardForm && topic == innerTopic){
            // tslint:disable-next-line:max-line-length
            if (_this.cy.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 && _this.cy.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cy.add({group: 'edges',data: {id: Math.random(),label: topic,source: elem.StandardForm,target: data[i].StandardForm}});
            }
          }
          else if (elem.StandardForm == data[i].StandardForm && topic != innerTopic) {
            // tslint:disable-next-line:max-line-length
            if (_this.cy.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 || _this.cy.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cy.add({group: 'edges',target: data[i].StandardForm}});
            }
          }
        });
      });
    }
  });
}
else{
  data.forEach(function(elem: any){
    for (let i = 0; i < data.length; i++){
      elem.Judges.forEach(function(judge: any){
        data[i].Judges.forEach(function(innerJudge: any){
          if (elem.StandardForm != data[i].StandardForm && judge.Name == innerJudge.Name){
            // tslint:disable-next-line:max-line-length
            if (_this.cyJudges.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 && _this.cyJudges.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cyJudges.add({group: 'edges',label: judge.Name,target: data[i].StandardForm}});
            }
          }
          else if (elem.StandardForm == data[i].StandardForm && judge.Name != innerJudge.Name) {
            // tslint:disable-next-line:max-line-length
            if (_this.cyJudges.edges('[source = "' + elem.StandardForm + '"][target = "' + data[i].StandardForm + '"]').length == 0 || _this.cyJudges.edges('[source = "' + data[i].StandardForm + '"][target = "' + elem.StandardForm + '"]').length == 0) {
              _this.cyJudges.add({group: 'edges',target: data[i].StandardForm}});
            }
          }
        });
      });
    }
  });
}

}

这里是我调用 createGraph 函数的地方：

... _this.createGraph(res,'topics'); _this.createGraph(res,'法官'); ...

这里是错误的堆栈：

错误类型错误：无法读取未定义的属性“x1” 在 Layout.push.ROFb.CircleLayout.run (cytoscape.cjs.js:19335) 在 SemanticSearchComponent.createGraph (semantic-search.component.ts:221) 在语义search.component.ts:403 在 XMLHttpRequest.xhttp.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (request-service.service.ts:119) 在 XMLHttpRequest.wrapFn (zone-evergreen.js:1218) 在 ZoneDelegate.invokeTask (zone-evergreen.js:399) 在 Object.onInvokeTask (core.js:28255) 在 ZoneDelegate.invokeTask (zone-evergreen.js:398) 在 Zone.runTask (zone-evergreen.js:167) 在 ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

我不知道是什么问题