This sample includes two diagrams, the one on top showing a full tree and the one below focusing on a specific node in the tree and those nodes that are logically "near" it. When the selection changes in either diagram, the lower diagram changes its focus to the selected node. To show which node in the full tree is selected, a large gold highlighter part employing a radial Brush is placed in the background layer of the upper diagram behind the selected node. The Create New Tree button will randomly generate a new TreeModel to be used by the diagrams.

Although it is not demonstrated in this sample, one could well use very simple templates for Nodes and for Links in the top Diagram. This would make the top Diagram more efficient to construct when there are very many more nodes. And one could use more detailed templates in the bottom Diagram, where there is more room to show information for each node.

GoJS Features in this sample

Tree Layout

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.

Related samples