javascript - add nodes and edges through loop in cytoscape arbor layout - Stack Overflow

admin管理员组

文章数量:1356077

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: b[0], faveBorderColor: "#AAAAAA", name: b[0], faveColor: "#EEB211", faveFontColor: "#ffffff" ,'link':''} },
                { data : { id: a[0], name: a[0], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[1], name: a[1], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[2], name: a[2], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[3], name: a[3], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[4], name: a[4], faveColor: "#21526a", faveFontColor: "#fff"} }
            ], //end "nodes"

            edges: [
                { data : { target: a[0], source : b[0] } },
                { data : { target: a[1], source : b[0]} },
                { data : { target: a[2], source : b[0]} },
                { data : { target: a[3], source : b[0]} },
                { data : { target: a[4], source : b[0]} }
            ]//end "edges"
        },//end "elements"

Now i have 100s of nodes to be added. a[] and b[] are arrays which gets data dynamically through mysql. Is there any chance to loop through nodes, so that all the data can be added dynamically.

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: b[0], faveBorderColor: "#AAAAAA", name: b[0], faveColor: "#EEB211", faveFontColor: "#ffffff" ,'link':'http://www.yahoo.'} },
                { data : { id: a[0], name: a[0], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[1], name: a[1], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[2], name: a[2], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[3], name: a[3], faveColor: "#21526a", faveFontColor: "#fff"} },
                { data : { id: a[4], name: a[4], faveColor: "#21526a", faveFontColor: "#fff"} }
            ], //end "nodes"

            edges: [
                { data : { target: a[0], source : b[0] } },
                { data : { target: a[1], source : b[0]} },
                { data : { target: a[2], source : b[0]} },
                { data : { target: a[3], source : b[0]} },
                { data : { target: a[4], source : b[0]} }
            ]//end "edges"
        },//end "elements"

Now i have 100s of nodes to be added. a[] and b[] are arrays which gets data dynamically through mysql. Is there any chance to loop through nodes, so that all the data can be added dynamically.

• javascript
• jquery
• cytoscape.js
• arbor.js

Share Improve this question Follow asked May 4, 2014 at 9:09 nyxem1nyxem1 17911 gold badge44 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

// assuming your graph object is available as 'cy' e.g. by
var 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( ... );

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.

本文标签： javascriptadd nodes and edges through loop in cytoscape arbor layoutStack Overflow