walking_drum_hide

index.html

<h2>
cytoscape.js with hide
</h2>
<p>
Double-click to collapse neighbors.  Move nodes around so edges are visible.
</p>
<div id="cy">
</div>

script.js

var cy = cytoscape({
  container: document.getElementById("cy"),
  layout: { name: "cose" },
  style: cytoscape.stylesheet(),
  elements: [
    {
      group: "nodes",
      data: {
        id: "n100",
        label: "Mat"
      }
    },
    {
      group: "nodes",
      data: {
        id: "n101",
        label: "Jean"
      }
    },
    {
      group: "nodes",
      data: {
        id: "n102",
        label: "Taillefeur"
      }
    },
    {
      group: "nodes",
      data: {
        id: "n103",
        label: "Walther"
      },
      classes: "hidden"
    },
    {
      group: "edges",
      data: {
        id: "e1",
        source: "n100",
        target: "n101"
      }
    },
    {
      group: "edges",
      data: {
        id: "e2",
        source: "n101",
        target: "n102"
      }
    },
    {
      group: "edges",
      data: {
        id: "e3",
        source: "n100",
        target: "n103"
      },
      classes: "hidden"
    }
  ],
  style: [
    {
      selector: "node",
      style: {
        label: "data(label)",
        width: "100%",
        "font-size": "7px",
        "text-valign": "center",
        shape: "rectangle",
        "background-color": "rgba(113,158,252,1)"
      }
    },
    {
      selector: ".hidden",
      style: {
        display: "none"
      }
    }
  ]
});

cy.nodes().addClass("open");
//cy.autolock(true);  // Disable drag
cy.nodes().on("click", function(e) {
  if (this.hasClass("open")) {
    this.removeClass("open");
    this.successors()
      .removeClass("open")
      .addClass("hidden");
  } else {
    var children = this.neighborhood(".hidden");
    this.removeClass("collapsed");
    children.removeClass("hidden");
    children.incomers(".hidden").removeClass("hidden");
    this.addClass("open");
  }
  cy.center(cy.elements('[class!="hidden"]'));
});

style.css

    #cy {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }

walking_drum_hide.markdown

walking_drum_hide

A Pen by Chip Webber on CodePen.

License.