Welcome to the world of NGX-GRAPH! I am currently working on creating a directed graph using this library. Below is the code snippet that I have implemented:
ngx-graph.component.html:
<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
[links]="links"
[nodes]="nodes"></ngx-graph>
ngx-graph.component.ts:
import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';
@Component({
selector: 'app-ngx-graph',
templateUrl: './ngx-graph.component.html',
styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
id: number;
constructor(private serverService: ServerService, private route: ActivatedRoute) { }
nodes: Node[] = [];
links: Edge[] = [];
ngOnInit() {
this.id = +this.route.snapshot.params.id;
this.serverService.getGraphGivenEndpointId(this.id).subscribe(
response => { this.nodes = response[0];
this.links = response[1];
console.log(this.nodes);
}
);
}
}
The JSON data returned by my service looks like this:
(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)
ServerService.ts:
@Injectable()
export class ServerService {
constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}
getGraphGivenEndpointId(id: number) {
return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
}
}
While initially the graph displays successfully similar to the one on the "quickstart" page here, adding customizations as shown below causes the nodes to disappear while the edges remain visible:
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
[attr.fill]="node.data.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
</svg:text>
</svg:g>
</ng-template>
This results in no error messages being displayed. Additionally, adding an update trigger in ngx-graph.component.ts did not resolve the issue:
this.nodes.forEach(element => {
this.nodes.push(element);
this.nodes = [...this.nodes];
});
My app.module.ts contains the necessary imports and configurations for NGX-GRAPH:
import { BrowserModule } from '@angular/platform-browser';
...
const appRoutes: Routes = [
...
];
@NgModule({
declarations: [
...
],
imports: [
...
],
providers: [ElencoEndpointService, ServerService],
bootstrap: [AppComponent]
})
export class AppModule { }
I followed the quick start guide provided on the official documentation but encountered this issue. Could there be additional steps or imports required?
Thank you for your assistance.