Question

我是cytoscape的新手，但我正在调查使用cytoscape.js显示多家航空公司的拓扑结构。我需要显示这些航空公司两个国家之间的航班。我的计划是创建一个cytoscape实例。对于每个航空公司，创建边和节点，并指定样式。在风格中，我想指定边缘的颜色。但是，我无法看到为每次迭代分配的不同颜色编码。相反，所有边和节点都获得在上一次迭代中分配的相同颜色。这是我的代码，

var cy = cytoscape({        
    container: document.getElementById('cy'),
    elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        {
          data: {
            id: 'ab',
            source: 'a',
            target: 'b'
          }
        }],
    style: [ // the stylesheet for the graph
    {
        selector: 'node',
        style: {
            'background-color': '#666',
            'label': 'data(id)'
        }
    },
    {
        selector: 'edge',
        style: {
            'width': 1,
            'line-color': '#aaa',
        }
    }
]});       


var colors = ["blue", "black"];        
for(var i = 0; i < selectedAirlines.length; i++)
{
    nodeCount ++;
    cy.add({
    data: { id: 'node' + i }
    });
    var source = 'node' + i;
    cy.add({
        data: {
            id: 'edge' + i,
            source: source,
            target: (i% 2 == 0 ? 'a' : 'b')
        }
    });
    cy.style([
        {
            selector: 'node',
            style: {
                shape: 'hexagon',
                'background-color': colors[i],
                label: 'data(id)'
            }
        }]); 
}

有人可以帮助我找出这里出了什么问题吗？

Answer 1

您在每次迭代时都会覆盖整个样式表。只需在init中设置样式表并使用映射器即可。阅读样式表信息文档的样式部分：http://js.cytoscape.org/#style

细胞景观中不同边缘组的不同颜色代码

1 个答案: