有没有办法在 cytoscape.js 中随时显示覆盖？

Question

有没有办法随时切换覆盖？例如，我希望我所有的节点都有红色覆盖层。我在我的风格中尝试了 overlay-color，但叠加层仅在其处于活动状态时显示，即当我将其拖动时。我看了这个但我仍然不知道如何实现它。完整样式如下：

{
    selector: 'node',
    css: {
    content: 'data(id)',
    'text-valign': 'bottom',
    'text-halign': 'center',
    height: '60px',
    width: '60px',
    'border-color': 'black',
    'border-opacity': '1',
    'background-image':
        'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
    'overlay-color': 'red',
    },
},

非常感谢！

Answer 1

您链接的 post 包含您问题的解决方案：

Don't skip properties if you're not sure what the default values are. In general, you should specify every property explicitly if it's important to your app, just as you would for css in the dom.

这归结为简单地添加缺少的 overlay-* 属性，即：

overlay-opacity
overlay-padding

以下代码片段显示了带有您的节点样式的 dagre 图：

var cy = window.cy = cytoscape({
  container: document.getElementById('cy'),

  boxSelectionEnabled: false,
  autounselectify: true,

  style: [{
      selector: 'node',
      css: {

        'content': 'data(id)',
        'text-valign': 'bottom',
        'text-halign': 'center',
        'height': '60px',
        'width': '60px',
        'border-color': 'black',
        'border-opacity': '1',
        'padding': '4',
        'background-image': 'https://farm8.staticflickr.com/7272/7633179468_3e19e45a0c_b.jpg',
        'overlay-color': 'red',
        'overlay-opacity': 0.35,
        'overlay-padding': '5',
      }
    },
    {
      selector: 'edge',
      css: {
        'target-arrow-shape': 'triangle'
      }
    },
  ],

  elements: {
    nodes: [{
        data: {
          id: 'n0'
        }
      },
      {
        data: {
          id: 'n1'
        }
      },
      {
        data: {
          id: 'n2'
        }
      },
      {
        data: {
          id: 'n3'
        }
      },
      {
        data: {
          id: 'n4'
        }
      },
      {
        data: {
          id: 'n5'
        }
      },
      {
        data: {
          id: 'n6'
        }
      },
      {
        data: {
          id: 'n7'
        }
      },
      {
        data: {
          id: 'n8'
        }
      },
      {
        data: {
          id: 'n9'
        }
      },
      {
        data: {
          id: 'n10'
        }
      },
      {
        data: {
          id: 'n11'
        }
      },
      {
        data: {
          id: 'n12'
        }
      },
      {
        data: {
          id: 'n13'
        }
      },
      {
        data: {
          id: 'n14'
        }
      },
      {
        data: {
          id: 'n15'
        }
      },
      {
        data: {
          id: 'n16'
        }
      }
    ],
    edges: [{
        data: {
          source: 'n0',
          target: 'n1'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n2'
        }
      },
      {
        data: {
          source: 'n1',
          target: 'n3'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n7'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n11'
        }
      },
      {
        data: {
          source: 'n2',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n4'
        }
      },
      {
        data: {
          source: 'n3',
          target: 'n16'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n5'
        }
      },
      {
        data: {
          source: 'n4',
          target: 'n6'
        }
      },
      {
        data: {
          source: 'n6',
          target: 'n8'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n9'
        }
      },
      {
        data: {
          source: 'n8',
          target: 'n10'
        }
      },
      {
        data: {
          source: 'n11',
          target: 'n12'
        }
      },
      {
        data: {
          source: 'n12',
          target: 'n13'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n14'
        }
      },
      {
        data: {
          source: 'n13',
          target: 'n15'
        }
      },
    ]
  },

  layout: {
    name: 'dagre',
    padding: 5
  }
});
let toggle = true

cy.on('click', function() {
  //toggle between invisible/visible overlay
  let value = toggle ? 0 : 0.35;
  toggle = !toggle;
  cy.nodes().style({
    'overlay-opacity': value
  });
});

body {
  font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  float: left;
  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/cytoscape@3.3.0/dist/cytoscape.min.js">
  </script>
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
  <!-- cyposcape dagre -->
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
  <div id="cy"></div>
</body>

</html>

有没有办法在 cytoscape.js 中随时显示覆盖？

Is there a way to show overlay whenever I want in cytoscape.js?

cytoscape.js