This illustrates how one can define custom strokes for Links (or really any Shape that is relatively straight) by making use of the Shape.pathPattern property to repeatedly draw a small Shape along the stroke path. These examples may be useful in generating diagrams showing social or emotional relationships or other cases where it is useful to distinguish kinds of relationships in more manners than just by the Shape.stroke (color) or Shape.strokeWidth or Shape.strokeDashArray.

The first set of link triplets, at the top, demonstrate the basic pathPatterns defined by the definePathPattern function in this page. The last set of link doublets, at the bottom, demonstrate how those basic pathPatterns can be combined in a single Link that has two Shapes that have GraphObject.isPanelMain set to true, so that both shapes get the same Geometry computed by the link. Yet each such link shape draws a different path pattern.

GoJS Features in this sample


GoJS provides its own collection classes: List, Set, and Map. You can iterate over a collection by using an Iterator. More information can be found in the GoJS Intro.

Related samples


The Link class is used to implement a visual relationship between nodes. Links are normally created by the presence of link data objects in the GraphLinksModel.linkDataArray or by a parent key reference as the value of the TreeModel.nodeParentKeyProperty of a node data object in a TreeModel. More information can be found in the GoJS Intro.

Related samples

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

Geometry Path Strings

The GoJS Geometry class controls the "shape" of a Shape, whereas the Shape.fill and Shape.stroke and other shape properties control the colors and appearance of the shape. For common shape figures, there are predefined geometries that can be used by setting Shape.figure. However one can also define custom geometries.

One can construct any Geometry by allocating and initializing a Geometry of at least one PathFigure holding some PathSegments. But you may find that using the string representation of a Geometry is easier to write and save in a database. Use the static method Geometry.parse or the Shape.geometryString property to transform a geometry path string into a Geometry object.

More information can be found in the GoJS Intro.

Related samples