javascript - 如何在 cytoscape.js 中显示子节点的同时隐藏复合节点

问题描述

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

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

到目前为止，我创建了一个只有复合节点具有的“复合”类，并且我尝试设置 opacity: 0 或 visibility: hidden 仅用于此类，但是这些选项中的每一个子节点也变得不可见。

这是一个非工作示例的 bin：

<!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版本

在此示例中，节点 n1 和 n2 以及父节点都被隐藏。我想保持父级隐藏但 n1 和 n2 可见。

标签： javascriptcytoscape.jsdirected-acyclic-graphs

javascript - 如何在 cytoscape.js 中显示子节点的同时隐藏复合节点

问题描述

解决方案

推荐阅读