different color code for different group of edges in cytoscape

1
votes

I am new to cytoscape but I am investigating to use cytoscape.js to display topology of multiple airlines. I need to display flights between two countries of these airlines. My plan is to create a cytoscape instance. For every airline, create edges and nodes, and specify style. In the style, i would like to specify color for edges. However, I am not able to see different color coding I assign for every iteration. Instead, all edges and nodes, get the same color which is assigned in the last iteration.Here is my code,

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

Can someone help me to find out whats going wrong here?

1
cytoscape.js

1 Answers

0
votes

You're overwriting the entire stylesheet on each iteration. Just set the stylesheet at init and use mappers. Read the style section of the docs for stylesheet info: http://js.cytoscape.org/#style