This sample creates and uses a custom Link class `BarLink`. It draws the perpendicular line between the Node and the HBar Node. When the Node doesn't line up horizontally with the HBAR it will draw an Orthogonal Link at close between them as possible.

{ "class": "go.GraphLinksModel", "nodeDataArray": [ {"key":0, "text":"Gen1", "category":"Generator", "location":"300 0"}, {"key":1, "text":"Bar1", "category":"HBar", "location":"100 100", "size":"500 4", "fill":"green"}, {"key":3, "text":"Cons1", "category":"Consumer", "location":"53 234"}, {"key":2, "text":"Bar2", "category":"HBar", "location":"0 300", "size":"600 4", "fill":"orange"}, {"key":4, "text":"Conn1", "category":"Connector", "location":"232.5 207.75"}, {"key":5, "text":"Cons3", "category":"Consumer", "location":"357.5 230.75"}, {"key":6, "text":"Cons2", "category":"Consumer", "location":"484.5 164.75"} ], "linkDataArray": [ {"from":0, "to":1}, {"from":0, "to":2}, {"from":3, "to":2}, {"from":4, "to":1}, {"from":4, "to":2}, {"from":5, "to":2}, {"from":6, "to":1} ]}

### GoJS Features in this sample

#### Links

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

#### Palette

A Palette is a subclass of Diagram that is used to display a number of Parts that can be dragged into the diagram that is being modified by the user. The initialization of a Palette is just like the initialization of any Diagram. Like Diagrams, you can have more than one Palette on the page at the same time.

More information can be found in the GoJS Intro.

Related samples

#### Overview Diagrams

An Overview is a subclass of Diagram that is used to display all of the Parts of another diagram and to show where that diagram's viewport is relative to all of those parts. The user can also scroll the overviewed diagram by clicking or dragging within the overview.

The initialization of an Overview is just a matter of setting Overview.observed to refer to the Diagram that you want it to show. So there needs to be a DIV for your main diagram, for which you create a Diagram in the normal manner, and a separate DIV for your overview, for which you create the Overview in a very simple manner.

More information can be found in the GoJS Intro.

Related samples