javascript - 在 cytoscape 乔木布局中通过循环添加节点和边

Question

我想在 arbor.js 布局中添加 10 个以上的节点。此代码在 cytoscape 的 arbor 布局中添加节点和边缘

 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动态获取数据。是否有机会循环遍历节点，以便可以动态添加所有数据。

Answer 1

您可以使用 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 中的哪些节点相连取决于您的数据结构。

您可以 rerun the layout with :

cy.layout( ... );