CODEWITHSUNDEEP
javascriptcytoscape.jsdirected-acyclic-graphs
Alexandre Leonardi
Alexandre Leonardi

Reputation: 53

How to hide compound nodes while still displaying children in cytoscape.js

I want to create a graph where a few nodes are "compound" nodes, embedding several children nodes, but without displaying them: the children nodes should be displayed but the compounds should be hidden.

As a layout I am using an extension for cytoscape.js called dagre-cytoscape.

So far I created a 'compound' class that only the compound nodes have, and I tried to set opacity: 0 or visibility: hidden for this class only, but which each of these options the children nodes became invisible as well.

Here is a bin of a non-working example:

<!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/[email protected]/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

In this example the nodes n1 and n2 are hidden, as well as the parent node. I would like to keep parent hidden but have n1 and n2 visible.

Upvotes: 4

Views: 1458

Answers (1)

user3140972
user3140972

Reputation: 1065

Try setting background-opacity and border-width of compound nodes to 0.

Upvotes: 4

Related Questions