CODEWITHSUNDEEP
javascriptgraphcytoscape.js
Nebril
Nebril

Reputation: 3273

How to manipulate cytoscape.js graph data before rendering

I have relatively big amount of graph data (over 1000 nodes, over 2000 edges). Cytoscape.js is failing to render this amount of data, so I decided I will cook some interactive graph exploration. I want to start with graph roots (it is DAG) and user will be able to explore nodes after clicking on them.

I know I can do it outside of cytoscape.js, but I wanted to know if I can create a node/edge collection that I would manipulate (remove all nodes but roots and their neighbours) and then use as data source (get child nodes of nodes). Cytoscape makes graph processing quite easy and it would be great to not need to reinvent the wheel.

I tried creating cy.collection based on the JSON data I was feeding to the graph, but it seems like it doesn't accept the same data format as cy.load.

Upvotes: 1

Views: 2285

Answers (1)

Nebril
Nebril

Reputation: 3273

I was able to work around that by creating two cytoscape objects. I am loading all my graph data to the variable I called allcy:

var allcy = cytoscape({
    headless: true,
});

Notice that it's headless, so it won't try to render nodes in any way.

Then I am creating normal "working" cy var

var cy = cytoscape({
    container: document.getElementById('thegraph'),
});

I load all my data to allcy

    allcy.load(response); //response is json graph data I got from xmlhttp request

I add roots and their neighbourhood to cy and reload the layout.

    cy.add(allcy.nodes().roots().closedNeighborhood());
    cy.layout(layoutSettings);

Voila! I have only root nodes in my rendered cy graph. Now I need to add other nodes from allcy as needed, but I think I will manage to do it. Hope it comes in handy to someone.

Upvotes: 3

Related Questions