Cytoscape.js Показать/скрыть метки на элементах графика при нажатии кнопки

У меня есть приложение узла, использующее Cytoscape v3.15.2. У меня есть стиль, установленный следующим образом

let cy = cytoscape({
            container: document.getElementById('graph-div'),
            style: [
                {
                    selector: 'node',
                    style: {
                        'label': 'data(id)',
                    }
               },
               {
                    selector: 'edge',
                    style: {
                        'label': (ele) => {
                            if(ele.data('type') === '1') return 'data(category1)';
                            if(ele.data('type') === '2') return 'data(category2)';
                            return value;
                        }
               }]
         });

Теперь, используя флажок, я пытаюсь показать/скрыть метки на элементах. Я попытался сделать следующее:

cy.elements().style("label","");

Но это не работает. То же самое работает, когда я передаю случайную строку вместо пустой строки, что-то вроде этого: cy.elements().style("label","random");. При этом метки всех элементов на графике становятся скрытыми. Не могли бы вы помочь мне, как это сделать. Спасибо


node.js javascript cytoscape cytoscape.js
person Sai Krishna    schedule 08.10.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете управлять отображением/скрытием меток, указав класс в таблице стилей, а затем переключая его при нажатии кнопки, как в приведенном ниже примере.

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),
  layout: {name: 'grid', rows: 2},
  style: [{
      selector: '.hasLabel',
      css: {
        'label': (ele) => {
          if(ele.isNode()) return ele.data('id');
          if(ele.isEdge()) return ele.data('weight');         
        }
      }
    }
  ],
  elements: {
    nodes: [{
        data: {
          id: 'n0'          
        }
      },
      {
        data: {
          id: 'n1'
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      }
    ],
    edges: [{
        data: {
          id: 'n0n1',
          source: 'n0',
          target: 'n1',
          weight: 3
        }
      },
      {
        data: {
          id: 'n1n2',        
          source: 'n1',
          target: 'n2',
          weight: 5
        }
      },
      {
        data: {
          id: 'n2n3',        
          source: 'n2',
          target: 'n3',
          weight: 7
        }
      }
    ]
  }
});

document.getElementById("labelButton").addEventListener("click", function() {
  cy.elements().toggleClass('hasLabel');
});
body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#button {
  z-index = 1000;
}

#cy {
  height: 95%;
  width: 95%;
  left: 0;
  top: 50;
  z-index = 900;
  position: absolute;
}
<html>

<head>
  <meta charset=utf-8 />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
  <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js">
  </script>
</head>

<body>
  <button id="labelButton" type="button">Show/Hide Labels</button>
  <div id="cy"></div>
</body>

</html>

person Hasan Balcı    schedule 09.10.2020