create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
393 lines (346 loc) • 18.6 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
<meta name="description" content="Examples of different visuals for relationships (links)." />
<meta itemprop="description" content="Examples of different visuals for relationships (links)." />
<meta property="og:description" content="Examples of different visuals for relationships (links)." />
<meta name="twitter:description" content="Examples of different visuals for relationships (links)." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Various Visual Relationships" />
<meta property="og:title" content="Various Visual Relationships" />
<meta name="twitter:title" content="Various Visual Relationships" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/relationships.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/relationships.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/relationships.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/relationships.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/relationships.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Various Visual Relationships | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200">
<div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4">
<a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo"
href="../">
GoJS
</a>
<div class="relative">
<button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation">
<svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<div id="topnavList" class="hidden md:block">
<div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit">
<a href="../learn/">Learn</a>
<a href="../samples/">Samples</a>
<a href="../intro/">Intro</a>
<a href="../api/">API</a>
<a href="../download.html">Download</a>
<a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a>
<a id="tc" href="https://nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a>
<a id="tb" href="https://nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a>
</div>
</div>
</div>
</div>
</nav>
<script>
window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
var url = window
.location
.href
.toLowerCase();
var aTags = topnavList.getElementsByTagName('a');
for (var i = 0; i < aTags.length; i++) {
var lowerhref = aTags[i]
.href
.toLowerCase();
if (lowerhref.endsWith('.html'))
lowerhref = lowerhref.slice(0, -5);
if (url.startsWith(lowerhref)) {
aTags[i]
.classList
.add('active');
break;
}
}
}
});
</script>
<div class="flex flex-col prose">
<div class="w-full max-w-screen-xl mx-auto">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
layout: new go.TreeLayout({
layerSpacing: 150,
arrangementSpacing: new go.Size(2, 2),
setsPortSpot: false,
setsChildPortSpot: false
})
});
// this typically represents a person
myDiagram.nodeTemplate =
new go.Node('Vertical')
.add(
new go.Shape('Circle', {
desiredSize: new go.Size(28, 28),
fill: 'white',
strokeWidth: 1.5,
portId: ''
})
.bind('figure'),
new go.TextBlock('name')
.bind('text')
);
// this template works for all kinds of relationships
myDiagram.linkTemplate =
new go.Link({
curve: go.Curve.Bezier, // slightly curved, by default
reshapable: true
}) // users can reshape the link route
.add(
new go.Shape({ // the link's path shape
isPanelMain: true,
stroke: 'transparent'
})
.bind('stroke', 'patt', f => f === '' ? 'black' : 'transparent')
.bind('pathPattern', 'patt', convertPathPatternToShape),
new go.Shape({ // the link's path shape
isPanelMain: true,
stroke: 'transparent',
strokeWidth: 3
})
.bind('pathPattern', 'patt2', convertPathPatternToShape),
new go.Shape({ // the "to" arrowhead
toArrow: '',
fill: null,
scale: 1.2
})
.bind('toArrow')
.bind('stroke', 'patt', convertPathPatternToColor),
new go.TextBlock({ // show the path object name
segmentOffset: new go.Point(0, 12)
})
.bind('text', 'patt'),
new go.TextBlock({ // show the second path object name, if any
segmentOffset: new go.Point(0, -12)
})
.bind('text', 'patt2')
);
// Conversion functions that make use of the PathPatterns store of pattern Shapes
function convertPathPatternToShape(name) {
if (!name) return null;
return PathPatterns.get(name);
}
function convertPathPatternToColor(name) {
var pattobj = convertPathPatternToShape(name);
return pattobj !== null ? pattobj.stroke : 'transparent';
}
// Define a bunch of small Shapes that can be used as values for Shape.pathPattern
var PathPatterns = new go.Map();
function definePathPattern(name, geostr, color, width, cap) {
if (typeof name !== 'string' || typeof geostr !== 'string') throw new Error('invalid name or geometry string argument: ' + name + ' ' + geostr);
if (color === undefined) color = 'black';
if (width === undefined) width = 1;
if (cap === undefined) cap = 'square';
PathPatterns.set(
name,
new go.Shape({
geometryString: geostr,
fill: 'transparent',
stroke: color,
strokeWidth: width,
strokeCap: cap
})
);
}
definePathPattern('Single', 'M0 0 L1 0');
definePathPattern('Double', 'M0 0 L1 0 M0 3 L1 3');
definePathPattern('Triple', 'M0 0 L1 0 M0 3 L1 3 M0 6 L1 6');
definePathPattern('DashR', 'M0 0 M3 0 L6 0', 'red');
definePathPattern('DoubleDashR', 'M0 0 M3 0 L6 0 M3 3 L6 3', 'red');
definePathPattern('TripleDashR', 'M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6', 'red');
definePathPattern('Dash', 'M0 0 M3 0 L6 0');
definePathPattern('DoubleDash', 'M0 0 M3 0 L6 0 M3 3 L6 3');
//definePathPattern("TripleDash", "M0 0 M3 0 L6 0 M3 3 L6 3 M3 6 L6 6");
definePathPattern('Dot', 'M0 0 M4 0 L4.1 0', 'black', 2, 'round');
definePathPattern('DoubleDot', 'M0 0 M4 0 L4.1 0 M4 3 L4.1 3', 'black', 2, 'round');
definePathPattern('SingleG', 'M0 0 L1 0', 'green');
definePathPattern('DoubleG', 'M0 0 L1 0 M0 3 L1 3', 'green');
definePathPattern('SingleR', 'M0 0 L1 0', 'red');
definePathPattern('TripleR', 'M0 0 L1 0 M0 3 L1 3 M0 6 L1 6', 'red');
definePathPattern('ZigzagB', 'M0 3 L1 0 3 6 4 3', 'blue');
definePathPattern('ZigzagR', 'M0 3 L1 0 3 6 4 3', 'red');
definePathPattern('BigZigzagR', 'M0 4 L2 0 6 8 8 4', 'red');
definePathPattern('DoubleZigzagB', 'M0 3 L1 0 3 6 4 3 M0 9 L1 6 3 12 4 9', 'blue');
definePathPattern('CrossG', 'M0 0 M3 0 M1 0 L1 8', 'green');
definePathPattern('CrossR', 'M0 0 M3 0 M1 0 L1 8', 'red');
//definePathPattern("Railroad", "M0 2 L3 2 M0 6 L3 6 M1 0 L1 8"); // also == Double & Cross
definePathPattern('BackSlash', 'M0 3 L2 6 M1 0 L5 6 M4 0 L6 3');
definePathPattern('Slash', 'M0 3 L2 0 M1 6 L5 0 M4 6 L6 3');
definePathPattern('Coil', 'M0 0 C2.5 0 5 2.5 5 5 C5 7.5 5 10 2.5 10 C0 10 0 7.5 0 5 C0 2.5 2.5 0 5 0');
definePathPattern('Square', 'M0 0 M1 0 L7 0 7 6 1 6z');
definePathPattern('Circle', 'M0 3 A3 3 0 1 0 6 4 A3 3 0 1 0 0 3');
definePathPattern('BigCircle', 'M0 5 A5 5 0 1 0 10 5 A5 5 0 1 0 0 5');
definePathPattern('Triangle', 'M0 0 L4 4 0 8z');
definePathPattern('Diamond', 'M0 4 L4 0 8 4 4 8z');
definePathPattern('Dentil', 'M0 0 L2 0 2 6 6 6 6 0 8 0');
definePathPattern('Greek', 'M0 0 L1 0 1 3 0 3 M0 6 L4 6 4 0 8 0 M8 3 L7 3 7 6 8 6');
definePathPattern('Seed', 'M0 0 A9 9 0 0 0 12 0 A9 9 180 0 0 0 0');
definePathPattern('SemiCircle', 'M0 0 A4 4 0 0 1 8 0');
definePathPattern('BlindHem', 'M0 4 L2 4 4 0 6 4 8 4');
definePathPattern('Zipper', 'M0 4 L1 4 1 0 8 0 8 4 9 4 M0 6 L3 6 3 2 6 2 6 6 9 6');
//definePathPattern("Zipper2", "M0 4 L1 4 1 0 8 0 8 4 9 4 M0 7 L3 7 3 3 6 3 6 7 9 7");
definePathPattern('Herringbone', 'M0 2 L2 4 0 6 M2 0 L4 2 M4 6 L2 8');
definePathPattern('Sawtooth', 'M0 3 L4 0 2 6 6 3');
// helper function for creating sequential chains of nodes
function addLinks(patt1a, patt1b, patt2a, patt2b, patt3a, patt3b) {
var arrow = 'OpenTriangle';
var left = { figure: 'Square' };
myDiagram.model.addNodeData(left);
var middle = { figure: 'Circle' };
myDiagram.model.addNodeData(middle);
myDiagram.model.addLinkData({ from: left.key, to: middle.key, patt: patt1a, patt2: patt1b, toArrow: arrow });
if (patt2a) {
var right = { figure: 'Triangle' };
myDiagram.model.addNodeData(right);
myDiagram.model.addLinkData({ from: middle.key, to: right.key, patt: patt2a, patt2: patt2b, toArrow: arrow });
if (patt3a) {
var farright = { figure: 'Diamond' };
myDiagram.model.addNodeData(farright);
myDiagram.model.addLinkData({ from: right.key, to: farright.key, patt: patt3a, patt2: patt3b, toArrow: arrow });
}
}
}
// simple path objects
var it = PathPatterns.iteratorKeys;
while (it.next()) {
addLinks(it.value, '', it.next() ? it.value : '', '', it.next() ? it.value : '');
}
// compound path objects
addLinks('DoubleG', 'CrossG', 'Single', 'CrossR');
addLinks('Dash', 'ZigzagR', 'Dash', 'BigZigzagR');
addLinks('Double', 'ZigzagR', 'Double', 'BigZigzagR');
addLinks('Triple', 'ZigzagR', 'Triple', 'BigZigzagR');
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width: 100%; height: 800px"></div>
<p>
This illustrates how one can define custom strokes for Links (or really any Shape that is relatively straight) by making use of the
<a>Shape.pathPattern</a> 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
<a>Shape.stroke</a> (color) or <a>Shape.strokeWidth</a> or <a>Shape.strokeDashArray</a>.
</p>
<p>
The first set of link triplets, at the top, demonstrate the basic pathPatterns defined by the <code>definePathPattern</code> function in this page. The last
set of link doublets, at the bottom, demonstrate how those basic pathPatterns can be combined in a single <a>Link</a> that has two <a>Shape</a>s that have
<a>GraphObject.isPanelMain</a> set to true, so that both shapes get the same <a>Geometry</a>
computed by the link. Yet each such link shape draws a different path pattern.
</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
<div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto">
<hr/>
<h3 class="text-xl">GoJS Features in this sample</h3>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Collections</h4>
<p>
<b>GoJS</b> provides its own collection classes: <a href="../api/symbols/List.html" target="api">List</a>, <a href="../api/symbols/Set.html" target="api">Set</a>, and <a href="../api/symbols/Map.html" target="api">Map</a>.
You can iterate over a collection by using an <a href="../api/symbols/Iterator.html" target="api">Iterator</a>.
More information can be found in the <a href="../intro/collections.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#collections">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Links</h4>
<p>
The <a href="../api/symbols/Link.html" target="api">Link</a> class is used to implement a visual relationship between nodes.
Links are normally created by the presence of link data objects in the <a href="../api/symbols/GraphLinksModel.html#linkDataArray" target="api">GraphLinksModel.linkDataArray</a>
or by a parent key reference as the value of the <a href="../api/symbols/TreeModel.html#nodeParentKeyProperty" target="api">TreeModel.nodeParentKeyProperty</a> of a node data object
in a <a href="../api/symbols/TreeModel.html" target="api">TreeModel</a>.
More information can be found in the <a href="../intro/links.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#links">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Tree Layout</h4>
<p>
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 <a href="../api/symbols/TreeLayout.html">TreeLayout</a>,
see the <a href="../intro/trees.html">Trees</a> page in the Introduction.
More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#treelayout">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Geometry Path Strings</h4>
<p>
The <b>GoJS</b> <a href="../api/symbols/Geometry.html" target="api">Geometry</a> class controls the "shape" of a <a href="../api/symbols/Shape.html" target="api">Shape</a>,
whereas the <a href="../api/symbols/Shape.html#fill" target="api">Shape.fill</a> and <a href="../api/symbols/Shape.html#stroke" target="api">Shape.stroke</a> 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 <a href="../api/symbols/Shape.html#figure" target="api">Shape.figure</a>.
However one can also define custom geometries.
</p>
<p>
One can construct any Geometry by allocating and initializing a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> of at least one <a href="../api/symbols/PathFigure.html" target="api">PathFigure</a> holding some <a href="../api/symbols/PathSegment.html" target="api">PathSegment</a>s.
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 <a href="../api/symbols/Geometry.html#parse" target="api">Geometry.parse</a> or the <a href="../api/symbols/Shape.html#geometryString" target="api">Shape.geometryString</a> property to transform a geometry path string into a <a href="../api/symbols/Geometry.html" target="api">Geometry</a> object.
</p>
<p>
More information can be found in the <a href="../intro/geometry.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#geometries">Related samples</a>
</p>
<hr>
</div>
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>