Cytoscape.js单击按钮时显示/隐藏图形中元素上的标签

// 创建按钮元素
var button = document.createElement('button');
button.innerHTML = 'Toggle Labels';
document.body.appendChild(button);

// 添加点击事件监听器
button.addEventListener('click', function() {
  var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
      // 图形数据
      { data: { id: 'node1', label: 'Node 1' } },
      { data: { id: 'node2', label: 'Node 2' } },
      { data: { id: 'edge1', source: 'node1', target: 'node2', label: 'Edge 1' } }
    ],
    style: [
      // 样式规则
      {
        selector: 'node',
        style: {
          'label': function(ele) {
            // 根据按钮状态返回显示/隐藏
            return button.classList.contains('active') ? ele.data('label') : '';
          }
        }
      },
      {
        selector: 'edge',
        style: {
          'label': function(ele) {
            // 根据按钮状态返回显示/隐藏
            return button.classList.contains('active') ? ele.data('label') : '';
          }
        }
      }
    ]
  });

  // 初始状态隐藏标签
  cy.style().fromJson(cy.style().json().concat([
    {
      selector: 'node',
      style: {
        'label': ''
      }
    },
    {
      selector: 'edge',
      style: {
        'label': ''
      }
    }
  ])).update();

  // 切换按钮状态
  button.classList.toggle('active');
});