gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
568 lines • 135 kB
HTML
<!doctype html>
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GraphLinksModel | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- non-fixed navbar -->
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="navheader-container">
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
<a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="../../index.html">Home</a></li>
<li><a href="../../learn/index.html">Learn</a></li>
<li><a href="../../samples/index.html">Samples</a></li>
<li><a href="../../intro/index.html">Intro</a></li>
<li><a href="../../api/index.html" target="api">API</a></li>
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
<li><a href="../../download.html">Download</a></li>
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
<a href="../index.html" class="title">GoJS API</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>® Diagramming Components<br/>version <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class GraphLinksModel</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<a href="Model.html" class="tsd-signature-type">Model</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">GraphLinksModel</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>GraphLinksModels support links between nodes and grouping nodes and links into subgraphs.
GraphLinksModels hold node data and link data in separate arrays.
Node data is normally represented in a <a href="Diagram.html">Diagram</a> by instances of <a href="Node.html">Node</a>,
but they could be represented by simple <a href="Part.html">Part</a>s or by <a href="Group.html">Group</a>s.
Link data should be represented by instances of <a href="Link.html">Link</a>.</p>
<p>Each link data object is assumed to have two values, one referring to the node that the
link is coming from and one that the link is going to.
The <a href="GraphLinksModel.html#linkFromKeyProperty">linkFromKeyProperty</a> property names the property on the link data whose value
is the key of the "from" node.
The <a href="GraphLinksModel.html#linkToKeyProperty">linkToKeyProperty</a> property names the property on the link data whose value
is the key of the "to" node.
The default values for these properties are "from" and "to" respectively.</p>
<p>For example, one can define a graph consisting of two nodes with one link connecting them:</p>
<pre><code class="hljs js"> model.nodeDataArray = [
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Alpha"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Beta"</span> }
];
model.linkDataArray = [
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> }
];</code></pre>
<p>If you want to have subgraphs in your diagram, where a group node contains some number of nodes and links,
you need to declare that some node data actually represent groups,
and you need to provide a reference from a member node data to its containing group node data.
The <a href="GraphLinksModel.html#nodeIsGroupProperty">nodeIsGroupProperty</a> property names the property on a node data that is true
if that node data represents a group.
The <a href="GraphLinksModel.html#nodeGroupKeyProperty">nodeGroupKeyProperty</a> property names the property on a node data whose value
is the key of the containing group's node data.
The default values for these properties are "isGroup" and "group" respectively.</p>
<p>For example, one can define a graph consisting of one group containing a subgraph of
two nodes connected by a link, with a second link from that group to a third node
that is not a member of that group:</p>
<pre><code class="hljs js"> model.nodeDataArray = [
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Group1"</span>, <span class="hljs-attr">isGroup</span>: <span class="hljs-literal">true</span>},
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">group</span>: <span class="hljs-string">"Group1"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Beta"</span>, <span class="hljs-attr">group</span>: <span class="hljs-string">"Group1"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-string">"Gamma"</span> }
];
model.linkDataArray = [
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Alpha"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Beta"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-string">"Group1"</span>, <span class="hljs-attr">to</span>: <span class="hljs-string">"Gamma"</span> }
];</code></pre>
<p>GraphLinksModels also support distinguishing the "port" element of a node to which
a link can connect, at either end of the link.
This identification is a string that names the "port" element in the node.
However, you need to set the <a href="GraphLinksModel.html#linkFromPortIdProperty">linkFromPortIdProperty</a> and/or
<a href="GraphLinksModel.html#linkToPortIdProperty">linkToPortIdProperty</a> properties before the model is able to
get the "port id" information from the link data.</p>
<p>For example, one can define a graph consisting of a "subtraction" node and two inputs and one output.
The "subtraction" node has two distinct inputs called "subtrahend" and "minuend";
the output is called "difference".</p>
<pre><code class="hljs js"> model.linkFromPortIdProperty = <span class="hljs-string">"fromPort"</span>; <span class="hljs-comment">// necessary to remember portIds</span>
model.linkToPortIdProperty = <span class="hljs-string">"toPort"</span>;
model.nodeDataArray = [
{ <span class="hljs-attr">key</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">constant</span>: <span class="hljs-number">5</span> }, <span class="hljs-comment">// a constant input node</span>
{ <span class="hljs-attr">key</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">constant</span>: <span class="hljs-number">2</span> }, <span class="hljs-comment">// another constant node</span>
{ <span class="hljs-attr">key</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">operation</span>: <span class="hljs-string">"subtract"</span> },
{ <span class="hljs-attr">key</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">value</span>: <span class="hljs-number">3</span> } <span class="hljs-comment">// the output node</span>
];
model.linkDataArray = [
{ <span class="hljs-attr">from</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">to</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">toPort</span>: <span class="hljs-string">"subtrahend"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">to</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">toPort</span>: <span class="hljs-string">"minuend"</span> },
{ <span class="hljs-attr">from</span>: <span class="hljs-number">3</span>, <span class="hljs-attr">to</span>: <span class="hljs-number">4</span>, <span class="hljs-attr">fromPort</span>: <span class="hljs-string">"difference"</span> }
];</code></pre>
<p>In this case links connected to node 3 (which is the subtraction operation)
are distinguished by port id.
The connections to the other nodes do not have any port identification,
presumably because there is only one port on those nodes, representing the node value.</p>
<p>Note that there is no requirement that the link data objects have any kind of unique identifier, unlike for node data.
There is no expectation that there be references to link data in the model, so there is no need for such an identifier.
When there are multiple links connecting two ports, the only way to distinguish the links in the model
is by reference to the particular link data object.
This is why there are two methods on the Diagram class for Nodes, <a href="Diagram.html#findNodeForKey">Diagram.findNodeForKey</a> and <a href="Diagram.html#findNodeForData">Diagram.findNodeForData</a>,
but there is only the one method for Links, <a href="Diagram.html#findLinkForData">Diagram.findLinkForData</a>.</p>
<p>However you may wish to have the model maintain string or number identifiers on the link data just as all models do for node data.
To get that behavior, so that you can call <a href="GraphLinksModel.html#findLinkDataForKey">findLinkDataForKey</a>, you need to set <a href="GraphLinksModel.html#linkKeyProperty">linkKeyProperty</a> to be a non-empty string.
Just as with the assignment of node keys, you can customize the assignment of link keys by setting
<a href="GraphLinksModel.html#makeUniqueLinkKeyFunction">makeUniqueLinkKeyFunction</a> to a function that returns a unique identifier.</p>
<p>This model does not support the modification of whether a node data object is a group.</p>
<p>This model cannot detect the modification of the <a href="GraphLinksModel.html#linkDataArray">linkDataArray</a> array
or the modification of any link data object.
If you want to add or remove link data from the <a href="GraphLinksModel.html#linkDataArray">linkDataArray</a>,
call the <a href="GraphLinksModel.html#addLinkData">addLinkData</a> or <a href="GraphLinksModel.html#removeLinkData">removeLinkData</a> methods.
If you want to modify the node a link connects to, call the
<a href="GraphLinksModel.html#setFromKeyForLinkData">setFromKeyForLinkData</a> and/or <a href="GraphLinksModel.html#setToKeyForLinkData">setToKeyForLinkData</a> methods.
If you want to change the membership of a node data in a group,
call the <a href="GraphLinksModel.html#setGroupKeyForNodeData">setGroupKeyForNodeData</a> method.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="GraphLinksModel.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#archetypeNodeData" class="tsd-kind-icon">archetype<wbr>Node<wbr>Data</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#copyLinkDataFunction" class="tsd-kind-icon">copy<wbr>Link<wbr>Data<wbr>Function</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkCategoryProperty" class="tsd-kind-icon">link<wbr>Category<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkDataArray" class="tsd-kind-icon">link<wbr>Data<wbr>Array</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkFromKeyProperty" class="tsd-kind-icon">link<wbr>From<wbr>Key<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkFromPortIdProperty" class="tsd-kind-icon">link<wbr>From<wbr>Port<wbr>IdProperty</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkKeyProperty" class="tsd-kind-icon">link<wbr>Key<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkLabelKeysProperty" class="tsd-kind-icon">link<wbr>Label<wbr>Keys<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkToKeyProperty" class="tsd-kind-icon">link<wbr>ToKey<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkToPortIdProperty" class="tsd-kind-icon">link<wbr>ToPort<wbr>IdProperty</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#makeUniqueLinkKeyFunction" class="tsd-kind-icon">make<wbr>Unique<wbr>Link<wbr>Key<wbr>Function</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#nodeGroupKeyProperty" class="tsd-kind-icon">node<wbr>Group<wbr>Key<wbr>Property</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#nodeIsGroupProperty" class="tsd-kind-icon">node<wbr>IsGroup<wbr>Property</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Methods</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#addLabelKeyForLinkData" class="tsd-kind-icon">add<wbr>Label<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#addLinkData" class="tsd-kind-icon">add<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#addLinkDataCollection" class="tsd-kind-icon">add<wbr>Link<wbr>Data<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#containsLinkData" class="tsd-kind-icon">contains<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#copyLinkData" class="tsd-kind-icon">copy<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#copyNodeData" class="tsd-kind-icon">copy<wbr>Node<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#findLinkDataForKey" class="tsd-kind-icon">find<wbr>Link<wbr>Data<wbr>For<wbr>Key</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getCategoryForLinkData" class="tsd-kind-icon">get<wbr>Category<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getFromKeyForLinkData" class="tsd-kind-icon">get<wbr>From<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getFromPortIdForLinkData" class="tsd-kind-icon">get<wbr>From<wbr>Port<wbr>IdFor<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getGroupKeyForNodeData" class="tsd-kind-icon">get<wbr>Group<wbr>Key<wbr>For<wbr>Node<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getKeyForLinkData" class="tsd-kind-icon">get<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getLabelKeysForLinkData" class="tsd-kind-icon">get<wbr>Label<wbr>Keys<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getToKeyForLinkData" class="tsd-kind-icon">get<wbr>ToKey<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#getToPortIdForLinkData" class="tsd-kind-icon">get<wbr>ToPort<wbr>IdFor<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#isGroupForNodeData" class="tsd-kind-icon">is<wbr>Group<wbr>For<wbr>Node<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#makeLinkDataKeyUnique" class="tsd-kind-icon">make<wbr>Link<wbr>Data<wbr>Key<wbr>Unique</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#mergeLinkDataArray" class="tsd-kind-icon">merge<wbr>Link<wbr>Data<wbr>Array</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#removeLabelKeyForLinkData" class="tsd-kind-icon">remove<wbr>Label<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#removeLinkData" class="tsd-kind-icon">remove<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#removeLinkDataCollection" class="tsd-kind-icon">remove<wbr>Link<wbr>Data<wbr>Collection</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setCategoryForLinkData" class="tsd-kind-icon">set<wbr>Category<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setDataProperty" class="tsd-kind-icon">set<wbr>Data<wbr>Property</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setFromKeyForLinkData" class="tsd-kind-icon">set<wbr>From<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setFromPortIdForLinkData" class="tsd-kind-icon">set<wbr>From<wbr>Port<wbr>IdFor<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setGroupKeyForNodeData" class="tsd-kind-icon">set<wbr>Group<wbr>Key<wbr>For<wbr>Node<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setKeyForLinkData" class="tsd-kind-icon">set<wbr>Key<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setLabelKeysForLinkData" class="tsd-kind-icon">set<wbr>Label<wbr>Keys<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setToKeyForLinkData" class="tsd-kind-icon">set<wbr>ToKey<wbr>For<wbr>Link<wbr>Data</a></li>
<li class="tsd-kind-method tsd-parent-kind-class"><a href="GraphLinksModel.html#setToPortIdForLinkData" class="tsd-kind-icon">set<wbr>ToPort<wbr>IdFor<wbr>Link<wbr>Data</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Graph<wbr>Links<wbr>Model<span class="tsd-signature-symbol">(</span>nodedataarray<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">></span>, linkdataarray<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="GraphLinksModel.html" class="tsd-signature-type">GraphLinksModel</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>This constructs an empty GraphLinksModel unless one provides arguments as the initial data array values
for the <a href="Model.html#nodeDataArray">Model.nodeDataArray</a> and <a href="GraphLinksModel.html#linkDataArray">GraphLinksModel.linkDataArray</a> properties.</p>
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> nodedataarray: <span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>an optional Array containing JavaScript objects to be represented by Nodes.</p>
</div>
</li>
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> linkdataarray: <span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">></span></h5>
<div class="tsd-comment tsd-typography">
<p>an optional Array containing JavaScript objects to be represented by Links.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="GraphLinksModel.html" class="tsd-signature-type">GraphLinksModel</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="archetypeNodeData" class="tsd-anchor"></a>
<h3>
archetype<wbr>Node<wbr>Data
<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a data object that will be copied and added to the model as a new node data each time there
is a link reference (either the "to" or the "from" of a link data) to a node key that does not yet exist in the model.</p>
<p>The default value is null -- node data is not automatically copied and added to the model
when there is an unresolved reference in a link data.
When adding or modifying a link data if there is a "from" or "to" key value for which <a href="Model.html#findNodeDataForKey">Model.findNodeDataForKey</a> returns null,
it will call <a href="Model.html#copyNodeData">Model.copyNodeData</a> on this property value and <a href="Model.html#addNodeData">Model.addNodeData</a> on the result.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.1</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="copyLinkDataFunction" class="tsd-anchor"></a>
<h3>
copy<wbr>Link<wbr>Data<wbr>Function
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">: </span><a href="GraphLinksModel.html" class="tsd-signature-type">GraphLinksModel</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets a function that makes a copy of a link data object.</p>
<p>You may need to set this property in order to ensure that a copied <a href="Link.html">Link</a> is bound
to data that does not share certain data structures between the original link data and the copied link data.
This property value may be null in order to cause <a href="GraphLinksModel.html#copyLinkData">copyLinkData</a> to make a shallow copy of a JavaScript Object.
The default value is null.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkCategoryProperty" class="tsd-anchor"></a>
<h3>
link<wbr>Category<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns a string naming that data's category,
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the category name;
if the second argument is supplied, the function should modify the link data object so that it has that new category name.
The default value is the name 'category', meaning that it expects the data to have a property named 'category' if it cares to name the category for the Link.
This is used by the diagram to distinguish between different kinds of links.
The name must not be null.
If the value is an empty string,
<a href="GraphLinksModel.html#getCategoryForLinkData">getCategoryForLinkData</a> will return an empty string for all link data objects.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getCategoryForLinkData">getCategoryForLinkData</a>, <a href="GraphLinksModel.html#setCategoryForLinkData">setCategoryForLinkData</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkDataArray" class="tsd-anchor"></a>
<h3>
link<wbr>Data<wbr>Array
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">></span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the array of link data objects that correspond to <a href="Link.html">Link</a>s in the <a href="Diagram.html">Diagram</a>.
The initial value is an empty Array.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkFromKeyProperty" class="tsd-anchor"></a>
<h3>
link<wbr>From<wbr>Key<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns
the key of the node data that the link data is coming from.
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the key of the link's source node;
if the second argument is supplied, the function should modify the link data object so that it has that new key
(which may be undefined to refer to no node) as the identifier to the "from" node.
The default value is the name 'from', meaning that it expects the data to have a property named 'from' to refer to the link's source node.
The name must not be null.
If the value is an empty string,
<a href="GraphLinksModel.html#getFromKeyForLinkData">getFromKeyForLinkData</a> will return undefined for all link data objects.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getFromKeyForLinkData">getFromKeyForLinkData</a>, <a href="GraphLinksModel.html#setFromKeyForLinkData">setFromKeyForLinkData</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkFromPortIdProperty" class="tsd-anchor"></a>
<h3>
link<wbr>From<wbr>Port<wbr>IdProperty
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns
the optional parameter naming a "port" element on the node that the link data is connected from.
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the string identifier of the link's source port;
if the second argument is supplied, the function should modify the link data object so that it has that string as the identifier to the "from" port.
The default value is the empty string indicating that one cannot distinguish
different logical connection points for any links.
The name must not be null nor the value of <a href="GraphLinksModel.html#linkFromKeyProperty">linkFromKeyProperty</a> or <a href="GraphLinksModel.html#linkToKeyProperty">linkToKeyProperty</a>.
If the value is an empty string,
<a href="GraphLinksModel.html#getFromPortIdForLinkData">getFromPortIdForLinkData</a> will return an empty string for all link data objects.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getFromPortIdForLinkData">getFromPortIdForLinkData</a>, <a href="GraphLinksModel.html#setFromPortIdForLinkData">setFromPortIdForLinkData</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkKeyProperty" class="tsd-anchor"></a>
<h3>
link<wbr>Key<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns a unique id number or string for each link data object.
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the unique string or number key for that link data object;
if the second argument is supplied, the function should modify the link data object so that it has that string or number as the unique key for that link.
The default value is the empty string, which means the model will not maintain a key property value on link data objects.
The name must not be null.</p>
<p>When this property has a value of an empty string (the default value),
<a href="GraphLinksModel.html#getKeyForLinkData">getKeyForLinkData</a> will return undefined, and <a href="GraphLinksModel.html#findLinkDataForKey">findLinkDataForKey</a> will always return null.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getKeyForLinkData">getKeyForLinkData</a></p>
</dd>
<dt>since</dt>
<dd><p>1.6</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkLabelKeysProperty" class="tsd-anchor"></a>
<h3>
link<wbr>Label<wbr>Keys<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Array</span><span class="tsd-signature-symbol"><</span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">></span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns
an array of keys of node data that are labels on that link data.
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the array of label node keys for the link;
if the second argument is supplied, the function should modify the link data object so that it holds that Array of node keys as references to label nodes.
The default value is the empty string: '', meaning that the model does not support links owning label nodes.</p>
<p>The name must not be null.
If the value is an empty string,
<a href="GraphLinksModel.html#getLabelKeysForLinkData">getLabelKeysForLinkData</a> will return an empty array for all link data objects.
You will need to set this property in order to support nodes as link labels.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getLabelKeysForLinkData">getLabelKeysForLinkData</a>, <a href="GraphLinksModel.html#setLabelKeysForLinkData">setLabelKeysForLinkData</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkToKeyProperty" class="tsd-anchor"></a>
<h3>
link<wbr>ToKey<wbr>Property
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="../index.html#Key" class="tsd-signature-type">Key</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns
the key of the node data that the link data is going to,
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the key of the link's destination node;
if the second argument is supplied, the function should modify the link data object so that it has that new key
(which may be undefined to refer to no node) as the identifier to the "to" node.
The default value is the name 'to', meaning that it expects the data to have a property named 'to' to refer to the link's destination node.
The name must not be null.
If the value is an empty string,
<a href="GraphLinksModel.html#getToKeyForLinkData">getToKeyForLinkData</a> will return undefined for all link data objects.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getToKeyForLinkData">getToKeyForLinkData</a>, <a href="GraphLinksModel.html#setToKeyForLinkData">setToKeyForLinkData</a></p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="linkToPortIdProperty" class="tsd-anchor"></a>
<h3>
link<wbr>ToPort<wbr>IdProperty
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">function</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">a</span><span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type">ObjectData</a><span class="tsd-signature-symbol">, </span><span class="tsd-signature-symbol">b</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the name of the data property that returns
the optional parameter naming a "port" element on the node that the link data is connected to.
The value may also be a function taking two arguments, where the first argument will be a link data object.
If the second argument is not supplied, the function should return the string identifier of the link's destination port;
if the second argument is supplied, the function should modify the link data object so that it has that string as the identifier to the "to" port.
The default value is the empty string indicating that one cannot distinguish
different logical connection points for any links.
The name must not be null nor the value of <a href="GraphLinksModel.html#linkFromKeyProperty">linkFromKeyProperty</a> or <a href="GraphLinksModel.html#linkToKeyProperty">linkToKeyProperty</a>.
If the value is an empty string,
<a href="GraphLinksModel.html#getToPortIdForLinkData">getToPortIdForLinkData</a> will return an empty string for all link data objects.</p>
<p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
<dl class="tsd-comment-tags">
<dt>see</dt>
<dd><p><a href="GraphLinksModel.html#getToPortIdForLinkData">getToPortIdForLinkData</a>, <a href="GraphLinksModel.html#setToPortIdForLinkData">setToPortIdForLinkDa