2

I am trying out swimlane ngx-graph, in my application user can delete or add nodes. Based on delete or add action I will update my data accordingly.

Real question now is how can I refresh my graph without refreshing entire page.

3 Answers3

3

You can update it by using the update$ option of the graph,

HTML :

<ngx-graph
    . . . // Other options
    [update$]="update$"
    . . . 
>

TS : 

// Observable for update 
update$: Subject<any> = new Subject();

// Update function
updateChart(){
    this.update$.next(true);
}

Once you update your data, call updateChart()

MonkeyScript
  • 4,776
  • 1
  • 11
  • 28
  • Cannot find name 'Subject'. Error am i missing something –  Feb 04 '19 at 17:27
  • @user8624282 Did you import it? `import { Subject } from 'rxjs';` – MonkeyScript Feb 05 '19 at 03:42
  • For me, this.update$.next(true); causes the entire graph to redraw, when I add a new node object to the nodes array. Is there a way to add a new node object to the nodes array and have the graph detect and add that new node to the rendered graph without redrawing the entire graph ? – Craig Oct 15 '19 at 22:41
  • @Craig I don't think so. They need to redraw the entire graph to adjust the spacing between nodes and links. If that's disabled, the graph will be messy if you try to add an inner node. – MonkeyScript Oct 16 '19 at 04:03
  • I've used a different force graph a few years back d3-force I think it was. Pure JS. It happily allowed nodes to be added to the graph view without requiring a re-render. – Craig Oct 17 '19 at 05:02
  • I've now switched to visjs which allows adding new nodes to the graph without re-rendering the entire graph. It simply updates and the physics takes over to reporition any nodes as required – Craig Nov 11 '19 at 01:52
  • This didn't work as for version 18.0.1. No such a component `ngx-graph`, nor an attribute `update$` that I could find. – Ahmad Shahwan Jul 19 '21 at 12:34
  • @AhmadShahwan https://swimlane.github.io/ngx-graph/demos/interactive-demo#triggering-update Please check this and see what you did wrong. – MonkeyScript Jul 21 '21 at 15:42
  • @Arcteezy OK my bad, thanks for you note. I was working with ngx-charts (and not ngx-graph) and internet search led me to the wrong place. Really sorry for the down-vote, but it seems to be locked now :(. – Ahmad Shahwan Jul 22 '21 at 14:02
3

For people getting 'Cannot assign to 'data' because it is an import.' using Thanan_Jajes answer, the following worked for me:

Object.assign(this, {data: [...data]});
BHANG
  • 354
  • 1
  • 5
  • 16
2

you trying to modify data is not recognized by change detection.

 this.data = updatedData;

instead try spreading data over, that will detect the changes. It worked for me.

 this.data = [...updatedData];
Thanan_Jaje
  • 109
  • 6