Creating subgraphs

Subgraphs are nodes containing an embedded graph. Subgraph derives from Node, so you can set its label in the same way as a standard node. You can retrieve the embedded graph using the getGraph function. You can then add nodes and links in the embedded graph as in the top-level graph.
To create a subgraph:
  • Use the graph.createSubgraph() function, as shown in the following code:
    var createSubgraph = function(label, x, y){
              var subgraph = graph.createSubgraph();
              subgraph.setLabel(label);
              var subnode1 = subgraph.getGraph().createNode();
              subnode1.setLabel("Subnode 1");
              var subnode2 = subgraph.getGraph().createNode();
              subnode2.move(100, 0);
              subnode2.setLabel("Subnode 2");
              var sublink = subgraph.getGraph().createLink();
              sublink.setStartNode(subnode1);
              sublink.setEndNode(subnode2);
              subgraph.move(x, y)
              return subgraph;
          };
    
    ...
              var node4 = createSubgraph("Node 4", 500, 175);
The resulting graph is as follows:
A graph
made up of four rectangular nodes: Node 1, Node 2, Node 3, Node 4.
Node 1 is located on the left, Node 2 at the top, Node 3 at the bottom,
and Node 4 on the right of the graph. Node 1 is connected to Node
2 and to Node 3 by links with an arrow tip. Node 2 and Node 3 are
connected to Node 4 by links with an arrow tip. Node 4 is expanded
as a subgraph that contains two rectangular subnodes: Subnode 1 and
Subnode 2. Subnode 1 is linked to Subnode 2 by an arrow.
Subgraphs can be collapsed and expanded by clicking their - or + icons, or programmatically using Subgraph.setCollapsed(collapsed, animate), where collapsed specifies whether to expand or collapse the subgraph, and animate specifies whether to play an expand or collapse animation.