Add Nodes And Edges Through Loop In Cytoscape Arbor Layout

I want to add more than 10 nodes in arbor.js layout.This code adds nodes and edges in arbor layout for cytoscape elements: { nodes: [ { data : { id:

Solution 1:

You can add elements to the graph in a loop with cy.add():

// assuming your graph object is available as 'cy' e.g. byvar cy = cytoscape({
    container: document.getElementById('cy')
});

a = your array
b = the other array

for (var i=0; i<a.length; i++) {

    var name = a[i]

    cy.add([
        {group: "nodes", data: {id: name, ... }},
        { group: "edges", data: { id: a[i]+b[0], source: a[i], target: b[0]},...}
    ])
};

This will add all nodes from array a and add an edge to the first element of b. Nodes are identified by their id and nodes with existing ids are not added again. How you figure out which nodes from a and b are connected depends on your data structure of course.

You can rerun the layout with:

cy.layout( ... );

Solution 2:

Thanks for the reply.It pushed me in a right direction. I performed this with simple loops as I had to change my whole layout to implement this.

var demoNodes = [];
var demoEdges = [];

demoNodes.push({

    data: {
        id: b[0],
        name:b[0]
    }
});

for (var i = 0; i < a.length; i++) {
    demoNodes.push({

        data: {
            id: a[i],
            name:a[i]
        }
    });
}



for (var i = 0; i < a.length; i++) {
    demoEdges.push({
        data: {
            source: b[0],
            target: a[i]

        }
    });
}

and put these values in elements

elements: {
            nodes:demoNodes,
            edges:demoEdges
        },

It worked out pretty well.