Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
655 views
in Technique[技术] by (71.8m points)

angular8 - ERROR TypeError: Cannot read property 'x1' of undefined. Cytoscape.js and Angular 8 project

I have a stange issue in a creation of two different graph using cytoscape.js in angular 8 project. I have the same function called in two cases that create the needed graph. The stack of the error have as line the line that call 'this.cy.layout(this.layout).run()'. Here is the code

createGraph(...) function:

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.addEdges(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(...) function:

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', data: {id: elem.StandardForm, href: elem.OriginalUri}, position: {x: Math.floor(Math.random() * 600), 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));

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

  });
}

}

addEdges(...) function:

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', data: {id: Math.random(), label: topic, source: elem.StandardForm, 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', data: {id: Math.random(), label: judge.Name, source: elem.StandardForm, 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', data: {id: Math.random(), label: judge.Name, source: elem.StandardForm, target: data[i].StandardForm}});
            }
          }
        });
      });
    }
  });
}

}

And here is where i call the createGraph function:

... _this.createGraph(res, 'topics'); _this.createGraph(res, 'judges'); ...

Here the stack of the error:

ERROR TypeError: Cannot read property 'x1' of undefined at Layout.push.ROFb.CircleLayout.run (cytoscape.cjs.js:19335) at SemanticSearchComponent.createGraph (semantic-search.component.ts:221) at semantic-search.component.ts:403 at XMLHttpRequest.xhttp.onreadystatechange [as __zone_symbol__ON_PROPERTYreadystatechange] (request-service.service.ts:119) at XMLHttpRequest.wrapFn (zone-evergreen.js:1218) at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:28255) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)

I cannot figure out what can be the problem

question from:https://stackoverflow.com/questions/65923262/error-typeerror-cannot-read-property-x1-of-undefined-cytoscape-js-and-angula

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...