Question

我想创建一个图形，其中几个节点是“复合”节点，嵌入几个子节点，但不显示它们：应该显示子节点，但应该隐藏化合物。

作为布局，我正在使用cytoscape.js的扩展名dagre-cytoscape。

到目前为止，我已经创建了仅复合节点具有的“ compound”类，并且我尝试仅为该类设置opacity：0或visible：隐藏，但是子节点的这些选项中的每一个也变为不可见。

这是一个无效示例的容器：

<!DOCTYPE html>

<html>

<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <meta content="utf-8" http-equiv="encoding">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

  <title>dagre demo</title>

  <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
  <script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
  <script src="https://cytoscape.org/cytoscape.js-dagre/cytoscape-dagre.js"></script>

  <style>
    body {
      font-family: helvetica;
      font-size: 14px;
    }
    #cy {
      width: 75%;
      height: 100%;
      position: absolute;
      left: 200;
      top: 200;
      z-index: 999;
    }
  </style>

  <script>
    window.addEventListener('DOMContentLoaded', function () {

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

        layout: {
          name: 'dagre'
        },

        style: [{
            selector: 'node',
            style: {
              'background-color': 'teal',
              'label': 'data(id)',
              'visibility': 'visible'
            }
          },
          {
            selector: '.compound',
            style: {
              'visibility': 'hidden'
            }
          }
        ],

        elements: {
          nodes: [{
              data: {
                id: 'n0'
              }
            },
            {
              data: {
                id: 'n1',
                parent: 'parent'
              }
            },
            {
              data: {
                id: 'n2',
                parent: 'parent'
              }
            },
            {
              data: {
                id: 'parent'
              },
              classes: 'compound'
            }
          ],
          edges: [{
              data: {
                source: 'n0',
                target: 'n1'
              }
            },
            {
              data: {
                source: 'n0',
                target: 'n2'
              }
            }
          ]
        }
      });
    });
  </script>
</head>

<body>
  <h1>cytoscape-dagre test</h1>
  <div id="cy"></div>

</body>

</html>

jsbin version

在此示例中，节点n1和n2以及父节点均被隐藏。我想使父项保持隐藏状态，但可以看到n1和n2。

Answer 1

尝试将复合节点的background-opacity和border-width设置为0。

如何在仍然在cytoscape.js中显示子级的同时隐藏复合节点

1 个答案: