CODEWITHSUNDEEP
javascriptangularngx-graph
travis_911
travis_911

Reputation: 321

Ngx-graph doesn't show properly nodes and edges

I'm trying to create a graph with the ngx-graph library(I'm new with it).I'm trying to create nodes and edges in a dynamic way. I get the info from a service and I push these data into two separate array(Nodes and Edges). Thw problem is the data are pushed properly but my graphic create nodes and edges in the same position.(x=0 and y=0). I tried also to force the position but don't change.

 <ngx-graph *ngIf="nodes.length > 0 && links.length > 0 && !loading"
    layout="dagre"
    [view]="[800,500]"
    [links]="links" 
    [nodes]="nodes">
  </ngx-graph>

And in my .ts component I add the nodes and edge:

createGraph() {

   this.nodes = [];
   this.links = [];

   if (this.items) {

   this.nodes.push({
      id: this.items.id,
      label: this.items.description
   });


  if (this.items.motivations) {
    let i = 0;
    for (let motivation of this.items.motivations) {
      ++i;
       this.nodes.push({
         id: motivation .id,
         label: motivation .description
       });

       this.links.push({
         id: motivation .id,
         source: this.nodes[0].id,
         target: motivation .id 
       });
    }

  }
  this.loading = false;
}

}

And at the end I always this error in console

ERROR TypeError: Cannot read property 'dimension' of undefined
    at swimlane-ngx-graph.js:2016
    at Array.map ()
    at QueryList.push../node_modules/@angular/core/fesm5/core.js.QueryList.map (core.js:5412)
    at GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.applyNodeDimensions (swimlane-ngx-graph.js:1988)
    at GraphComponent.push../node_modules/@swimlane/ngx-graph/fesm5/swimlane-ngx-graph.js.GraphComponent.draw (swimlane-ngx-graph.js:1796)
    at swimlane-ngx-graph.js:1768
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4053)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

Upvotes: 2

Views: 3355

Answers (1)

zerocewl
zerocewl

Reputation: 12804

Have a look at the docs from ngx-graph how to trigger an update.

The graph component updates itself on every input change. The inputs are immutable, so in order to trigger the update, you would need to pass a new object instance.

Example, this will not trigger an update, because we are modifying the nodes array in place, and not creating a new instance:

this.nodes.push(newNode);

We need to create a new instance of the array in order to trigger change detection in the component:

this.nodes.push(newNode);
this.nodes = [...this.nodes];

To manually trigger the updade, the graph accepts an update$ input as an observable:

Upvotes: 1

Related Questions