This sample demonstrates subgraphs that are created only as groups are expanded.
The model is initially a random number of nodes, including some groups, in a tree layout. When a group is expanded, the Group.subGraphExpandedChanged event handler calls a function to generate a random number of nodes in a tree layout inside the group if it did not contain none any. Each non-group node added has a unique random color, and links are added by giving each node one link to another node.
The addition of nodes and links is performed within a transaction to ensure that the diagram updates itself properly. The diagram's tree layout and the tree layouts within each group are performed again when a sub-graph is expanded or collapsed.
This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the TreeLayout, see the Trees page in the Introduction. More information can be found in the GoJS Intro.
The Group class is used to treat a collection of Nodes and Links as if they were a single Node. Those nodes and links are members of the group; together they constitute a subgraph.
A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. All of the Parts that are members of a Group belong to the same Diagram as the Group. There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. There can even be links between member nodes and the containing group itself.
More information can be found in the GoJS Intro.
GoJS defines several Panels for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels.
These predefined panels can be used as if they were Panel-derived classes in calls to GraphObject.make. They are implemented as simple visual trees of GraphObjects in Panels, with pre-set properties and event handlers.
More information can be found in the GoJS Intro.