CODEWITHSUNDEEP
cytoscape.js
Zeeshan Rao
Zeeshan Rao

Reputation: 93

Cytoscape js - Initiliaze the graph using cytoscape-graphml.js

I have a graphML file. I want to display the graph from my graphML file on the browser. I'm working with cytoscape.js. As far as I understood, we can import graph from the graphML file using cytoscape extention cytoscape-graphml.js. But I don't know how to do that. Here is the example of what I want to achieve.

var cy;
fetch('http://localhost/Development/example.graphml')
.then(response => response.text())
.then((data) => {
   cy = cytoscape({
     container: document.getElementById('cy'),
     elements: data
   });
});

Upvotes: 0

Views: 674

Answers (1)

Stephan T.
Stephan T.

Reputation: 6074

Well, as you can read in the docs of cytoscape.js-graphml, you only need to initialize cytoscape with the graphml data and a layout like this:

var cy;
fetch('http://localhost/Development/example.graphml')
.then(response => response.text())
.then((data) => {
   cy = cytoscape({
     container: document.getElementById('cy'),
     style: [
        {
            selector: 'node',
            style: {
                'content': 'data(id)'
            }
        },
        {
            selector: 'edge',
            style: {
                'target-arrow-shape': 'triangle'
            }
        }
    ],         
    ready: function () {
        this.graphml({layoutBy: 'cose'});
        this.graphml(data);
    }
  });
});

Upvotes: 2

Related Questions