異なる色のコードがサイトスコープ内の異なるグループに対応

Question

私はcytoscapeには新しいですが、複数の航空会社のトポロジを表示するためにcytoscape.jsを使用することを検討しています。私はこれらの航空会社の2カ国間のフライトを表示する必要があります。私の計画は、サイトスコープのインスタンスを作成することです。すべての航空会社について、エッジとノードを作成し、スタイルを指定します。スタイルでは、私はエッジの色を指定したいと思います。しかし、すべての繰り返しで割り当てる色分けコーディングを見ることができません。代わりに、すべてのエッジノードは、最後のiteration.Hereに割り当てられている同じ色を取得する私のコードで、

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