Ngx-graph doesn't show properly nodes and edges

Question

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)

Can your provide a minmal [Stackblitz](https://stackblitz.com/) which shows your error? — zerocewl, Oct 02 '19 at 12:29

score 1 · Answer 1 · answered Oct 02 '19 at 12:33

1

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:

answered Oct 02 '19 at 12:33

zerocewl

11,401
6
27
53

1

I have the same issue, but your solution is not working for me. Still looking for an answer. – Craig Oct 04 '19 at 00:40
Please provide a [minimal-reproducible-example](https://stackoverflow.com/help/minimal-reproducible-example) – zerocewl Oct 04 '19 at 08:47
1

For me, the issue was a real 'Gotcha'. in ngx-graph, node id's are treated as strings. As I was setting them as a number, the mismatch caused this problem. – Craig Oct 05 '19 at 10:16

Ngx-graph doesn't show properly nodes and edges

1 Answers1