如何通過cytoscape.js中的類選擇節點？

CYTOSCAPE.JS如何通過cytoscape.js中的類選擇節點？

我不能設法樣式應用到（clLevel0）在節點的數據定義的類。我寫了一個函數來解決這個問題。因此，功能上也解釋了什麼是我想做的事情，在這是;-)

function setNodesClassStyles(cy, clas, styleobject) 
{ 
    var all = cy.nodes(); 
    for (i = 0; i < all.length; i++) { 
     the_node = all[i]; 
     all_classes = the_node.data().classes; 
     //alert(all_classes); 
     if (all_classes != undefined) { 
      all_classes = all_classes.split(' '); 
      for (i = 0; i < all_classes.length; i++) { 
       alert(all_classes[i]); 
       if (clas == all_classes[i]) { 
        the_node.style(styleobject) 
       } 

      } 
     } 
    } 
}; 
setNodesClassStyles(cy, "clLevel0", {'background-color':'#00E'});

我想這（不工作）更簡單的方法：

{ 
    selector: ".clLevel0", 
    style: { 
    'background-color': '#EAA', 
    } 
},

什麼是應用的正確方法樣式在類'clas'的節點上？更多代碼：

var cy = cytoscape({ 

     container: document.getElementById('cy'), // container to render in 

     elements: [ // list of graph elements to start with 
     // LEVEL 0 NODE 
     { // node 
      data: { id: 'me', name: 'Dirk\[email protected]', classes: 'clLevel0 clRoot', weight: 10000}, 

      "position": { 
      "x": 600, 
      "y": 400 }, 

     }, 

    // LEVEL 1 NODES 
     { 
      data: { id: 'skills', name: 'Skills', } 
     }, 
     { 
      data: { id: 'education', name: 'School' } 
     }, 
     { 
      data: { id: 'work', name: 'Jobs\nProjects' } 
     }, 
     { 
      data: { id: 'passion', name: 'Passions' } 
     }, 

// .... 
    style: [ 
    { 
     selector: 'node', 
     style: { 
     'height': 40, 
     'width': 40, 
     //'height': 20, 
     //'width': 20, 
     'background-color': '#EE0', 
// .... 

    { 
     selector: ".clLevel0", 
     style: { 
     'background-color': '#EAA', 
     } 
    }, 

    ], 
//...

來源

2017-08-08 Dick Schrauwen

（1）如果節點具有多個重疊的樣式屬性（例如，背景中的節點，.clLevel0，..）只有最後一個定義的屬性，都會施加（2）類是（'..'），.removeClass（'..'），.hasClass（'..'），.. （3）.style（stylesheet）不能在節點上工作，但在覈心cytoscape實例 –

Thanx湯姆，問題出現在（錯誤）''data：{id：'me'，name：'Dirk'，classes：'clLevel0'，weight：10000}''RIGHT：' 'data：{id：'me'，name：'Dirk'}，classes：'clLevel0'，weight：10000'' –

document.addEventListener("DOMContentLoaded", function() { 

    var cy = cytoscape({ 
    container: document.getElementById('cy'), 
    elements: { 
     nodes: [ 
      { data: { id: 'n', label: 'Olo' } }, 
      { data: { id: 'c'}, classes: 'className'} 
    ]} 
    }); 
    cy.style.fromJson([ 
     { 
     selector: 'node', 
     style: { 
      'color': 'red' 
     } 
     },{ 
     selector: '.className', 
     style: { 
      'label': 'this has a class', 
      'color': 'blue' 
     } 
     } 
    ]) 
});

來源

2017-08-09 08:41:51

如何通過cytoscape.js中的類選擇節點？

回答

相關問題