javascript - 如何在 cytoscape.js 中按类选择节点？

Question

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\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',
      }
    },

  ],
//...

Answer 1

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