gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
936 lines (839 loc) • 37.9 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="Tutorial for getting started with GoJS."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. --> <title> Get Started with GoJS </title>
<link rel="stylesheet" href="../assets/css/prism.css" />
<script src="../release/go.js"></script>
</head>
<body>
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
<div class="flex-shrink-0 px-8 py-4">
<button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
<a href="../learn/index.html">Get Started</a>
<a href="../learn/graphObject.html">Manipulating GraphObjects</a>
<a href="../learn/interactivity.html">Interacting with Diagrams</a>
</nav>
</div>
<div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
<h1>Get Started with GoJS</h1>
<h2 id="GoJSTutorials">GoJS Tutorials</h2>
<p>
For video tutorials, see our
<a href="https://www.nwoods.com/videos.html">YouTube videos</a>. For textual
tutorials, read on.
</p>
<p>
<b>GoJS</b> is a JavaScript library for implementing interactive diagrams.
This page will show you the essentials of using <b>GoJS</b>.
We assume you are a programmer who is familiar with HTML, CSS, and JavaScript.
</p>
<p>
First, let's load the GoJS library. If you have the library downloaded to your machine:
</p>
<pre class="lang-html"><code>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="go-debug.js"></script>
</code></pre>
<p>
You can download <b>GoJS</b> and all the documentation and samples from
<a target="_blank" href="../download.html">here</a>.
</p>
<p>
Alternatively, you can link straight to a <b>GoJS</b> library provided by a
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Glossary/CDN">CDN</a>
such as:
</p>
<pre class="lang-html"><code>
<script src="https://unpkg.com/gojs/release/go-debug.js"></script></code></pre>
<p>
Each <b>GoJS</b> diagram is contained in an HTML
<code><div></code> element in your HTML page that you give an explicit
size:
</p>
<pre class="lang-html"><code>
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
In this case we also add a background color so we can see that area. -->
<div id="myDiagramDiv"
style="width:400px; height:150px; background-color: #DAE4E4;"></div>
</code></pre>
<p>
In JavaScript code you pass the <code><div></code>'s
<code>id</code> when making a Diagram:
</p>
<pre class="lang-js"><code>
var myDiagram = new go.Diagram("myDiagramDiv");
</code></pre>
<p>This HTML and JS together creates an empty diagram:</p>
<!-- LIVE -->
<div id="myDiagramDiv" class="diagramStyling" style="width: 400px; height: 150px"></div>
<script>
var myDiagram = new go.Diagram("myDiagramDiv");
</script>
<p>
Notice that <code>go</code> is the "namespace" in which all <b>GoJS</b> types
reside. All code uses of <b>GoJS</b> classes such as Diagram or Node or Panel
or Shape or TextBlock will be prefixed with "<code>go.</code>".
</p>
<h2 id="DiagramsAndModels">Diagrams and Models</h2>
<p>
The Nodes and Links of a Diagram are visualizations of data that is managed by
a Model.
<b>GoJS</b> has a model-view architecture, where Models hold the data (arrays
of JavaScript objects) that describe nodes and links, and Diagrams act as
views to visualize this data using actual Node and Link objects. Models, not
Diagrams, are what you load and then save after editing. You add whatever
properties you need for your app on the data objects in the model; you do not
add properties to or modify the prototype of the Diagram and GraphObject
classes.
</p>
<p>
Here's an example of a Model and Diagram, followed by the actual diagram it
generates:
</p>
<pre class="lang-js"><code>
// You can specify options in the Diagram's second argument
// These options not only include Diagram properties, but sub-properties, too.
const myDiagram =
new go.Diagram("myDiagramDiv",
{ // enable Ctrl-Z to undo and Ctrl-Y to redo
"undoManager.isEnabled": true
});
myDiagram.model = new go.Model(
[ // for each object in this Array, the Diagram creates a Node to represent it
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
]);
</code></pre>
<!-- LIVE -->
<div id="myDiagramDiv2" class="diagramStyling" style="width: 400px; height: 150px"></div>
<script>
var myDiagram =
new go.Diagram("myDiagramDiv2",
{ // enable Ctrl-Z to undo and Ctrl-Y to redo
"undoManager.isEnabled": true,
});
myDiagram.model = new go.Model(
[ // for each object in this Array, the Diagram creates a Node to represent it
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" }
]);
</script>
<p>
The diagram displays the three nodes that are in the model. Some interaction
is already possible:
</p>
<ul>
<li>
Click and drag the background in the above diagram to pan the view.
</li>
<li>
Click a node to select it, or press down on and drag a node to move it
around.
</li>
<li>
To create a selection box, click and hold on the background, then start
dragging.
</li>
<li>
Use Ctrl-C and Ctrl-V, or control-drag-and-drop, to make a copy of the selection.
(Use the Command key as the modifier on MacOS instead of the Control key.)
</li>
<li>
Press the Delete key to delete selected nodes. (Read about more
<a href="../intro/commands.html">Keyboard Commands</a>.)
</li>
<li>
On touch devices, press and hold to bring up a context menu. (Read about
<a href="../intro/contextMenus.html">Context Menus</a>.)
</li>
<li>
Since the undo manager was enabled, Ctrl-Z and Ctrl-Y will undo and redo
moves and copies and deletions.
</li>
</ul>
<h2 id="StylingNodes">Styling Nodes</h2>
<p>
Nodes are styled by creating templates consisting of GraphObjects and setting
properties on those objects. To create a
<a href="../intro/nodes.html">Node</a>, we have several building block classes
at our disposal:
</p>
<ul>
<li>
<a href="../intro/shapes.html">Shape</a>, to display pre-defined or custom
geometry with colors
</li>
<li>
<a href="../intro/textblocks.html">TextBlock</a>, to display (potentially
editable) text in various fonts
</li>
<li>
<a href="../intro/pictures.html">Picture</a>, to display images, including
SVG files
</li>
<li>
<a href="../intro/panels.html">Panel</a>, containers to hold a collection of
other objects that can be positioned and sized in different manners
according to the type of the Panel (like tables, vertical stacks, and
stretching containers)
</li>
</ul>
<p>
All of these building blocks are derived from the
<a href="../api/symbols/GraphObject.html">GraphObject</a> abstract class, so
we casually refer to them as GraphObjects or objects or elements. Note that a
GraphObject is <em>not</em> an HTML DOM element, so there is much less overhead in
creating or modifying such objects.
</p>
<p>
We want the model data properties to affect our Nodes, and this is done by way
of data bindings. Data bindings allow us to change the appearance and behavior
of GraphObjects in Nodes by automatically setting properties on those
GraphObjects to values that are taken from the model data. The model data
objects are plain JavaScript objects. You can choose to use whatever property
names you like on the node data in the model.
</p>
<p>
The default Node template is simple: A Node which contains one TextBlock.
There is a data binding between a TextBlock's <code>text</code> property and
the model data's <code>key</code> property. In code, the template looks
like this:
</p>
<pre class="lang-js"><code>
myDiagram.nodeTemplate =
new go.Node()
.add(new go.TextBlock()
.bind("text", "key")) // TextBlock.text is bound to Node.data.key
</code></pre>
<p>
TextBlocks, Shapes, and Pictures are the primitive building blocks of
<b>GoJS</b>. TextBlocks cannot contain images; Shapes cannot contain text. If
you want your node to show some text, you must use a TextBlock. If you want to
draw or fill some geometrical figures, you must use a Shape.
</p>
<p>
More generally, the skeleton of a Node template will look something like this:
</p>
<pre class="lang-js"><code>
myDiagram.nodeTemplate =
new go.Node("Vertical", // first argument of a Node (or any Panel) can be a Panel type
/* set Node properties here */
{ // the Node.location point will be at the center of each node
locationSpot: go.Spot.Center
})
/* then add Bindings here */
// example Node binding sets Node.location to the value of Node.data.loc
.bind("location", "loc")
/* add GraphObjects contained within the Node */
// this Shape will be vertically above the TextBlock
.add(new go.Shape("RoundedRectangle", // string argument can name a predefined figure
{ /* set Shape properties here */ })
// example Shape binding sets Shape.figure to the value of Node.data.fig
.bind("figure", "fig"))
// add the next GraphObject to the Node:
.add(new go.TextBlock("default text", // string argument can be initial text string
{ /* set TextBlock properties here */ })
// example TextBlock binding sets TextBlock.text to the value of Node.data.text
.bind("text"));
</code></pre>
<p>
Without all the comments, the template looks like this:
</p>
<pre class="lang-js"><code>
// The same Node template as above
myDiagram.nodeTemplate =
new go.Node("Vertical",
{
locationSpot: go.Spot.Center
})
.bind("location", "loc")
.add(new go.Shape("RoundedRectangle")
.bind("figure", "fig"))
.add(new go.TextBlock("default text")
.bind("text"));
</code></pre>
<p>
The nesting of GraphObjects within Panels can be arbitrarily deep, and every
class has its own unique set of properties to utilize, but this shows the
general idea.
</p>
<p>
Now that we have seen how to make a Node template, let's see a live example.
We will make a simple template commonly seen in organizational diagrams — an
image next to a name. Consider the following Node template:
</p>
<ul>
<li>
A Node of "Horizontal" Panel type, meaning that its elements will be laid
out horizontally side-by-side. It has two elements:
<ul>
<li>A Picture for the portrait, with the image source data bound</li>
<li>A TextBlock for the name, with the text data bound</li>
</ul>
</li>
</ul>
<pre class="lang-js"><code>
const myDiagram =
new go.Diagram("myDiagramDiv",
{ // enable Ctrl-Z to undo and Ctrl-Y to redo
"undoManager.isEnabled": true
});
// define a simple Node template
myDiagram.nodeTemplate =
new go.Node("Horizontal",
// the entire node will have a light-blue background
{ background: "#44CCFF" })
.add(new go.Picture(
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{ margin: 10, width: 50, height: 50, background: "red" })
// Picture.source is data bound to the "source" attribute of the model data
.bind("source"))
.add(new go.TextBlock(
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
// TextBlock.text is data bound to the "name" property of the model data
.bind("text", "name"));
myDiagram.model = new go.Model(
[ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
// because in our template above, we have defined bindings to expect them
{ name: "Don Meow", source: "cat1.png" },
{ name: "Copricat", source: "cat2.png" },
{ name: "Demeter", source: "cat3.png" },
{ /* Empty node data, to show a node with no values from bindings */ }
]);
</code></pre>
<p>That code produces this diagram:</p>
<!-- LIVE -->
<div id="myDiagramDiv3" class="diagramStyling" style="width: 700px; height: 200px"></div>
<script>
var myDiagram = new go.Diagram("myDiagramDiv3",
{ // enable Ctrl-Z to undo and Ctrl-Y to redo
"undoManager.isEnabled": true
});
// define a simple Node template
myDiagram.nodeTemplate =
new go.Node("Horizontal",
// the entire node will have a light-blue background
{ background: "#44CCFF" })
.add(new go.Picture(
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{ margin: 10, width: 50, height: 50, background: "red" })
// Picture.source is data bound to the "source" attribute of the model data
.bind("source"))
.add(new go.TextBlock(
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
// TextBlock.text is data bound to the "name" property of the model data
.bind("text", "name"));
myDiagram.model = new go.Model(
[ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
// because in our template above, we have defined a bindings to expect them
{ name: "Don Meow", source: "cat1.png" },
{ name: "Copricat", source: "cat2.png" },
{ name: "Demeter", source: "cat3.png" },
{ /* Empty node data, to show a node with no bindings */ }
]);
</script>
<p>
We may want to show some "default" state when not all information is present,
for instance when an image does not load or when a name is not known. The
"empty" node data in this example is used to show that node templates can work
perfectly well without any of the properties on the bound data.
</p>
<h2 id="KindsOfNodes">Kinds of Models</h2>
<p>
With a custom node template our diagram is becoming a pretty sight, but
perhaps we want to show more. Perhaps we want an organizational chart to show
that Don Meow is really the boss of a cat cartel. So we will create a complete
organization chart diagram by adding some Links to show the relationship
between individual nodes and a Layout to automatically position the nodes.
</p>
<p>
In order to get links into our diagram, the basic <code>Model</code> is not
going to cut it. We are going to have to pick one of the other two models in
<b>GoJS</b>, both of which support Links. These are
<code>GraphLinksModel</code> and <code>TreeModel</code>. (Read more about
models <a href="../intro/usingModels.html">here</a>.)
</p>
<p>
In GraphLinksModel, we have a <code>model.linkDataArray</code> in addition to
the <code>model.nodeDataArray</code>. It holds an array of JavaScript objects,
each describing a link by specifying the "to" and "from" node keys. Here's an
example where node A links to node B and where node B links to node C:
</p>
<pre class="lang-js"><code>
myDiagram.model = new go.GraphLinksModel(
[ // the nodeDataArray
{ key: "A" },
{ key: "B" },
{ key: "C" }
],
[ // the linkDataArray
{ from: "A", to: "B" },
{ from: "B", to: "C" }
]);
</code></pre>
<p>
A GraphLinksModel allows you to have any number of links between nodes, going
in any direction. There could be ten links running from A to B, and three more
running the opposite way, from B to A.
</p>
<p>
A TreeModel works a little differently. Instead of maintaining a separate
array of link data, the links in a tree model are created by specifying a
"parent" for a node data. Links are then created from this association. Here's
the same example done as a TreeModel, with node A linking to node B and node B
linking to node C:
</p>
<pre class="lang-js"><code>
myDiagram.model = new go.TreeModel(
[ // the nodeDataArray
{ key: "A" },
{ key: "B", parent: "A" },
{ key: "C", parent: "B" }
]);
</code></pre>
<p>
TreeModel is simpler than GraphLinksModel, but it cannot make arbitrary link
relationships, such as multiple links between the same two nodes, or having
multiple parents. Our organizational diagram is a simple hierarchical
tree-like structure, so we will choose TreeModel for this example.
</p>
<p>
First, we will complete the data by adding a few more nodes, using a
TreeModel, and specifying keys and parents in the data.
</p>
<pre class="lang-js"><code>
const myDiagram = new go.Diagram("myDiagramDiv",
{
"undoManager.isEnabled": true
});
// the template we defined earlier
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
myDiagram.model = new go.TreeModel(
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
]);
</code></pre>
<!-- LIVE -->
<div id="myDiagramDiv4" class="diagramStyling" style="width: 700px; height: 200px"></div>
<script>
var myDiagram = new go.Diagram("myDiagramDiv4",
{
"undoManager.isEnabled": true
});
// the template we defined earlier
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
myDiagram.model = new go.TreeModel(
[ // the "key" and "parent" property names are required,
// but you can add whatever data properties you need for your app
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
]);
</script>
<h2 id="DiagramLayouts">Diagram Layouts</h2>
<p>
As you can see the TreeModel automatically creates the necessary Links to
associate the Nodes, but it's hard to tell whose parent is who.
</p>
<p>
Diagrams have a default layout which takes all nodes that do not have a
location and gives them locations, arranging them in a grid. We could
explicitly give each of our nodes a location to sort out this organizational
mess, but as an easier solution in our case, we will use a layout that gives
us good locations automatically.
</p>
<p>
We want to show a hierarchy, and are already using a TreeModel, so the most
natural layout choice is TreeLayout. TreeLayout defaults to flowing from left
to right, so to get it to flow from top to bottom (as is common in
organizational diagrams), we will set the <code>angle</code> property to 90.
</p>
<p>
Using layouts in <b>GoJS</b> is usually simple. Each kind of layout has a
number of properties that affect the results. There are samples for each
layout (like <a href="../samples/tLayout.html">TreeLayout Demo</a>) that
showcase its properties.
</p>
<pre class="lang-js"><code>
// define a TreeLayout that flows from top to bottom
myDiagram.layout = new go.TreeLayout({ angle: 90, layerSpacing: 35 });
</code></pre>
<p>
<b>GoJS</b> has many other layouts, which you can read about
<a href="../intro/layouts.html">here</a>.
</p>
<p>
Adding the layout to the diagram and model so far, we can see our results:
</p>
<pre class="lang-js"><code>
const myDiagram = new go.Diagram("myDiagramDiv",
{
"undoManager.isEnabled": true,
layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 })
});
// the template we defined earlier
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
// the same model as before
myDiagram.model = new go.TreeModel(
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
]);
</code></pre>
<!-- LIVE -->
<div id="myDiagramDiv5" class="diagramStyling" style="width: 700px; height: 400px"></div>
<script>
var myDiagram = new go.Diagram("myDiagramDiv5",
{
"undoManager.isEnabled": true,
layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 })
});
// the template we defined earlier
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
// the same model as before
myDiagram.model = new go.TreeModel(
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" },
]);
</script>
<p>
Our diagram is starting to look like a proper organization chart, but we could
do better with the links.
</p>
<h2 id="LinkTemplates">Link Templates</h2>
<p>
We will construct a new Link template that will better suit our wide, boxy
nodes. A <a href="../intro/links.html">Link</a> is a different kind of Part,
not like a Node. The main element of a Link is the Link's shape, and must be a
Shape that will have its geometry computed dynamically by <b>GoJS</b>. Our
link is going to consist of just this shape, with its stroke a little thicker
than normal and dark gray instead of black. Unlike the default link template
we will not have an arrowhead. And we will change the Link
<code>routing</code> property from Normal to Orthogonal, and give it a
<code>corner</code> value so that right-angle turns are rounded.
</p>
<pre class="lang-js"><code>
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
new go.Link(
// default routing is go.Link.Normal
// default corner is 0
{ routing: go.Link.Orthogonal, corner: 5 })
// the link path, a Shape
.add(new go.Shape({ strokeWidth: 3, stroke: "#555" }))
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
//.add(new go.Shape({ toArrow: "Standard", stroke: null }))
</code></pre>
<p>
Combining our Link template with our Node template, TreeModel, and TreeLayout,
we finally have a full organization diagram. The complete code is repeated
below, and the resulting diagram follows:
</p>
<pre class="lang-js"><code>
const myDiagram = new go.Diagram("myDiagramDiv",
{
"undoManager.isEnabled": true,
layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 })
});
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
new go.Link(
// default routing is go.Link.Normal
// default corner is 0
{ routing: go.Link.Orthogonal, corner: 5 })
// the link path, a Shape
.add(new go.Shape({ strokeWidth: 3, stroke: "#555" }))
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
//.add(new go.Shape({ toArrow: "Standard", stroke: null }))
// it's best to declare all templates before assigning the model
myDiagram.model = new go.TreeModel(
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
]);
</code></pre>
<!-- LIVE -->
<div id="myDiagramDiv6" class="diagramStyling" style="width: 700px; height: 400px"></div>
<script>
var myDiagram = new go.Diagram("myDiagramDiv6",
{
"undoManager.isEnabled": true,
layout: new go.TreeLayout({ angle: 90, layerSpacing: 35 })
});
myDiagram.nodeTemplate =
new go.Node("Horizontal",
{ background: "#44CCFF" })
.add(new go.Picture(
{ margin: 10, width: 50, height: 50, background: "red" })
.bind("source"))
.add(new go.TextBlock("Default Text",
{ margin: 12, stroke: "white", font: "bold 16px sans-serif" })
.bind("text", "name"));
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
new go.Link(
// default routing is go.Link.Normal
// default corner is 0
{ routing: go.Link.Orthogonal, corner: 5 })
// the link path, a Shape
.add(new go.Shape({ strokeWidth: 3, stroke: "#555" }))
// if we wanted an arrowhead we would also add another Shape with toArrow defined:
//.add(new go.Shape({ toArrow: "Standard", stroke: null }))
// it's best to declare all templates before assigning the model
myDiagram.model = new go.TreeModel(
[
{ key: "1", name: "Don Meow", source: "cat1.png" },
{ key: "2", parent: "1", name: "Demeter", source: "cat2.png" },
{ key: "3", parent: "1", name: "Copricat", source: "cat3.png" },
{ key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
{ key: "5", parent: "3", name: "Alonzo", source: "cat5.png" },
{ key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
]);
</script>
<h2 id="LearnMore">Learn More</h2>
<p>
You may want to read more tutorials, such as the
<a href="graphObject.html">GraphObject Manipulation</a> tutorial and the
<a href="interactivity.html">Interactivity</a> tutorial. You can also watch
tutorials on
<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">YouTube</a>.
</p>
<p>
Also consider looking at the <a href="../samples/index.html">samples</a> to
see some of the diagrams possible with <b>GoJS</b>, or read the
<a href="../intro/index.html">technical introduction</a> to get an in-depth
look at the components of <b>GoJS</b>.
</p>
</div>
</div>
<div class="bg-nwoods-primary">
<section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
<p id="version" class="leading-none mb-2 my-4">GoJS</p>
</section>
</div><footer class="bg-nwoods-primary text-white">
<div class="container max-w-screen-lg mx-auto px-8">
<div class="w-full py-6">
<div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10">
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">GoJS</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="../samples/index.html">Samples</a>
</li>
<li>
<a href="../learn/index.html">Learn</a>
</li>
<li>
<a href="../intro/index.html">Intro</a>
</li>
<li>
<a href="../api/index.html">API</a>
</li>
<li>
<a href="../changelog.html">Changelog</a>
</li>
<li>
<a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Support</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
</li>
<li>
<a href="https://forum.nwoods.com/c/gojs">Forum</a>
</li>
<li>
<a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
</li>
<li>
<a href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
</li>
<li>
<a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
</li>
</ul>
</li>
<li class="list-none row-span-2">
<h2 class="text-base font-semibold tracking-wide">Company</h2>
<ul class="list-none space-y-4 md:space-y-1 px-0">
<li>
<a target="_blank" href="https://www.nwoods.com">Northwoods</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/about.html">About Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a>
</li>
<li>
<a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a>
</li>
<li>
<a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a>
</li>
</ul>
</li>
</ul>
<p class="text-sm text-gray-100 md:mb-6">
Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
</p>
</div>
</div>
</footer> </body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
topButton.addEventListener("click", function() {
this.classList.toggle("active");
topnavList.classList.toggle("hidden");
document.getElementById("topnavOpen").classList.toggle("hidden");
document.getElementById("topnavClosed").classList.toggle("hidden");
});
</script>
<script src="../assets/js/prism.js"></script>
<script src="../assets/js/goDoc.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
if (window.goDoc) window.goDoc();
});
</script>
</html>