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

CYTOSCAPE.JS

我无法将样式应用于节点数据（

clLevel0

）中定义的类。我写了一个函数来解决这个问题。因此，该函数还以一种更简单的方式解释了我要做的事情；-）

在类为“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） 如果节点具有多个重叠样式属性（例如，节点中的背景、.clLevel0、…），则仅应用最后定义的属性（2）类将通过node.addClass（“…”）、.removeClass（“…”）、.hasClass（“…”）访问。。（3） .style（样式表）在节点上不起作用，但在核心cytoscape实例上，问题出在（错误的）

数据：{id:'me'，name:'Dirk'，classes:'clLevel0'，weight:10000}

右：

数据：{id:'me'，name:'Dirk'，classes:'clLevel0'，weight:10000

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

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

  ],
//...

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