How to install & use sigmajs in angular 8

46 Views Asked by At

I would like to add sigmajs to angular 8 to draw a network chart (including more than 1000 nodes & edges) with drag-drop. How can I use it? Which version of sigmajs (and graphology) is compatible with angular 8?

My environment: NodeJS 10.24.1 & Angular CLI 8

My sigmajs & graphology version

"dependencies": {
    ...
    "graphology": "^0.11.4",
    "sigma": "^1.2.2",
    ...
}

My component

import Graph from "graphology";
import sigma from "sigma";

@Component({
    selector: "app",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const graph = new Graph();
        graph.import({
            nodes: [
                {key:"0.0",attributes:{x:268,y:91,size:22,label:"Myriel",color:"#D8482D"}},
                {key:"1.0",attributes:{x:296,y:57,size:15,label:"Napoleon",color:"#B30000"}}
            ],
            edges: [
                {key:"0",source:"1.0",target:"0.0",attributes:{size:1}}
            ]
        });
        const renderer = new sigma(graph, document.getElementById("myid"));
        renderer.refresh();
    }
}

My code compiled with no error but it doesn't render the chart. What should I do?

0

There are 0 best solutions below