在cytoscape arbor布局中通过循环添加节点和边缘 [英] add nodes and edges through loop in cytoscape arbor layout

问题描述

我想在arbor.js布局中添加10个以上的节点。这个代码在细胞景观的乔木布局中添加节点和边缘

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.com'} },
                { 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"

现在我有要添加的节点数为100。 a []和b []是通过mysql动态获取数据的数组。是否有机会循环遍历节点，以便可以动态添加所有数据。

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.

推荐答案

您可以添加元素到使用 cy.add（）循环绘制图形：

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]},...}
    ])
};

这将添加数组 a 中的所有节点并为 b 的第一个元素添加一条边。节点由其ID和节点标识，不再添加现有ID。如何确定连接 a 和 b 中的哪些节点取决于您的数据结构。

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.

您可以重新运行布局使用：

cy.layout( ... );

这篇关于在cytoscape arbor布局中通过循环添加节点和边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！