如何在cytoscape.js中按类选择节点?

时间:2017-08-08 15:11:15

标签: javascript cytoscape.js

CYTOSCAPE.JS

我无法将样式应用于node-data(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\n@dickschrauwen', 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',
      }
    },

  ],
//...

1 个答案:

答案 0 :(得分:2)

ionic cordova run ios