Question

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

 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( ... );

Answer 2

感谢您的回复。它向我推进了正确的方向。我用简单的循环执行了这个操作，因为我不得不改变整个布局来实现它。

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]

        }
    });
}

并将这些值放在元素

中

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

效果很好。

在cytoscape arbor布局中通过循环添加节点和边缘

2 个答案: