gojs

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>GraphLinksModel | GoJS API</title><meta name="description" content="Documentation for GoJS API"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="stylesheet" href="../assets/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><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\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">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/index.html">Learn</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li><li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">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" id="contactBtn">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" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="tsd-page-header"><div class="tsd-page-toolbar"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class GraphLinksModel </h1></div></div></div></header><div class="tsd w-full max-w-screen-xl mx-auto pb-4"><div class="row px-2 w-full"><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" data-tsd-kind="Class">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> <div><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="language-js"><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">nodeDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Alpha"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Beta"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</span><br/><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">linkDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-6">"Alpha"</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-6">"Beta"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</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="language-js"><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">nodeDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Group1"</span><span class="hl-2">, </span><span class="hl-4">isGroup:</span><span class="hl-2"> </span><span class="hl-1">true</span><span class="hl-2">},</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Alpha"</span><span class="hl-2">, </span><span class="hl-4">group:</span><span class="hl-2"> </span><span class="hl-6">"Group1"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Beta"</span><span class="hl-2">, </span><span class="hl-4">group:</span><span class="hl-2"> </span><span class="hl-6">"Group1"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Gamma"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</span><br/><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">linkDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-6">"Alpha"</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-6">"Beta"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-6">"Group1"</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-6">"Gamma"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</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="language-js"><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">linkFromPortIdProperty</span><span class="hl-2"> = </span><span class="hl-6">"fromPort"</span><span class="hl-2">; </span><span class="hl-0">// necessary to remember portIds</span><br/><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">linkToPortIdProperty</span><span class="hl-2"> = </span><span class="hl-6">"toPort"</span><span class="hl-2">;</span><br/><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">nodeDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-7">1</span><span class="hl-2">, </span><span class="hl-4">constant:</span><span class="hl-2"> </span><span class="hl-7">5</span><span class="hl-2"> }, </span><span class="hl-0">// a constant input node</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2">, </span><span class="hl-4">constant:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2"> }, </span><span class="hl-0">// another constant node</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2">, </span><span class="hl-4">operation:</span><span class="hl-2"> </span><span class="hl-6">"subtract"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-7">4</span><span class="hl-2">, </span><span class="hl-4">value:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2"> } </span><span class="hl-0">// the output node</span><br/><span class="hl-2"> ];</span><br/><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">linkDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-7">1</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2">, </span><span class="hl-4">toPort:</span><span class="hl-2"> </span><span class="hl-6">"subtrahend"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-7">2</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2">, </span><span class="hl-4">toPort:</span><span class="hl-2"> </span><span class="hl-6">"minuend"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">from:</span><span class="hl-2"> </span><span class="hl-7">3</span><span class="hl-2">, </span><span class="hl-4">to:</span><span class="hl-2"> </span><span class="hl-7">4</span><span class="hl-2">, </span><span class="hl-4">fromPort:</span><span class="hl-2"> </span><span class="hl-6">"difference"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</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></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 tsd-is-overwrite"><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/>Id<wbr/>Property</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/>To<wbr/>Key<wbr/>Property</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="GraphLinksModel.html#linkToPortIdProperty" class="tsd-kind-icon">link<wbr/>To<wbr/>Port<wbr/>Id<wbr/>Property</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/>Is<wbr/>Group<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 tsd-is-overwrite"><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/>Id<wbr/>For<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/>To<wbr/>Key<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/>To<wbr/>Port<wbr/>Id<wbr/>For<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 tsd-is-overwrite"><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/>Id<wbr/>For<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/>To<wbr/>Key<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/>To<wbr/>Port<wbr/>Id<wbr/>For<wbr/>Link<wbr/>Data</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><h2>Inherited Members</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section undefined"><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copiesArrayObjects" class="tsd-kind-icon">Model.copies<wbr/>Array<wbr/>Objects</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copiesArrays" class="tsd-kind-icon">Model.copies<wbr/>Arrays</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copiesKey" class="tsd-kind-icon">Model.copies<wbr/>Key</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copyNodeDataFunction" class="tsd-kind-icon">Model.copy<wbr/>Node<wbr/>Data<wbr/>Function</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#dataFormat" class="tsd-kind-icon">Model.data<wbr/>Format</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#isReadOnly" class="tsd-kind-icon">Model.is<wbr/>Read<wbr/>Only</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#makeUniqueKeyFunction" class="tsd-kind-icon">Model.make<wbr/>Unique<wbr/>Key<wbr/>Function</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#modelData" class="tsd-kind-icon">Model.model<wbr/>Data</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#name" class="tsd-kind-icon">Model.name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeCategoryProperty" class="tsd-kind-icon">Model.node<wbr/>Category<wbr/>Property</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeDataArray" class="tsd-kind-icon">Model.node<wbr/>Data<wbr/>Array</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeKeyProperty" class="tsd-kind-icon">Model.node<wbr/>Key<wbr/>Property</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#skipsUndoManager" class="tsd-kind-icon">Model.skips<wbr/>Undo<wbr/>Manager</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#undoManager" class="tsd-kind-icon">Model.undo<wbr/>Manager</a></li></ul></section><section class="tsd-index-section undefined"><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addArrayItem" class="tsd-kind-icon">Model.add<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addChangedListener" class="tsd-kind-icon">Model.add<wbr/>Changed<wbr/>Listener</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addNodeData" class="tsd-kind-icon">Model.add<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addNodeDataCollection" class="tsd-kind-icon">Model.add<wbr/>Node<wbr/>Data<wbr/>Collection</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#applyIncrementalJson" class="tsd-kind-icon">Model.apply<wbr/>Incremental<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Model.html#cloneDeep" class="tsd-kind-icon">Model.clone<wbr/>Deep</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#commit" class="tsd-kind-icon">Model.commit</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#commitTransaction" class="tsd-kind-icon">Model.commit<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#containsNodeData" class="tsd-kind-icon">Model.contains<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#copy" class="tsd-kind-icon">Model.copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#findNodeDataForKey" class="tsd-kind-icon">Model.find<wbr/>Node<wbr/>Data<wbr/>For<wbr/>Key</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#getCategoryForNodeData" class="tsd-kind-icon">Model.get<wbr/>Category<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#getKeyForNodeData" class="tsd-kind-icon">Model.get<wbr/>Key<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#insertArrayItem" class="tsd-kind-icon">Model.insert<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#makeNodeDataKeyUnique" class="tsd-kind-icon">Model.make<wbr/>Node<wbr/>Data<wbr/>Key<wbr/>Unique</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#mergeNodeDataArray" class="tsd-kind-icon">Model.merge<wbr/>Node<wbr/>Data<wbr/>Array</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#raiseChangedEvent" class="tsd-kind-icon">Model.raise<wbr/>Changed<wbr/>Event</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#raiseDataChanged" class="tsd-kind-icon">Model.raise<wbr/>Data<wbr/>Changed</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeArrayItem" class="tsd-kind-icon">Model.remove<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeChangedListener" class="tsd-kind-icon">Model.remove<wbr/>Changed<wbr/>Listener</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeNodeData" class="tsd-kind-icon">Model.remove<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeNodeDataCollection" class="tsd-kind-icon">Model.remove<wbr/>Node<wbr/>Data<wbr/>Collection</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#rollbackTransaction" class="tsd-kind-icon">Model.rollback<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#set" class="tsd-kind-icon">Model.set</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#setCategoryForNodeData" class="tsd-kind-icon">Model.set<wbr/>Category<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#setKeyForNodeData" class="tsd-kind-icon">Model.set<wbr/>Key<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#startTransaction" class="tsd-kind-icon">Model.start<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toIncrementalData" class="tsd-kind-icon">Model.to<wbr/>Incremental<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toIncrementalJson" class="tsd-kind-icon">Model.to<wbr/>Incremental<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toJson" class="tsd-kind-icon">Model.to<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#updateTargetBindings" class="tsd-kind-icon">Model.update<wbr/>Target<wbr/>Bindings</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 tsd-is-overwrite"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><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><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span>, linkdataarray<span class="tsd-signature-symbol">?: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span>, init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</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" data-tsd-kind="Class">GraphLinksModel</a></li><li class="tsd-signature tsd-kind-icon">new <wbr/>Graph<wbr/>Links<wbr/>Model<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</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" data-tsd-kind="Class">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: <a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">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: <a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">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><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"> <p>optional initialization properties.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</a></h4></li><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> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography"> <p>optional initialization properties.</p> </div></li></ul><h4 class="tsd-returns-title">Returns <a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">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 id="archetypeNodeData" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> archetype<wbr/>Node<wbr/>Data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><a href="#archetypeNodeData" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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> <div><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> </div><dl class="tsd-comment-tags"><dt class="">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 id="copyLinkDataFunction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copy<wbr/>Link<wbr/>Data<wbr/>Function<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, b<span class="tsd-signature-symbol">: </span><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><a href="#copyLinkDataFunction" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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> <div><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></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="linkCategoryProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> 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-symbol">(</span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, b<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><span class="tsd-signature-symbol">)</span><a href="#linkCategoryProperty" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></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 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> <div><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> </div><dl class="tsd-comment-tags"><dt class="">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 id="linkDataArray" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> link<wbr/>Data<wbr/>Array<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span><a href="#linkDataArray" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></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 id="linkFromKeyProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> 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-symbol">(</span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, b<span class="tsd-signature-symbol">?: </span><a href="../index.html#Key" class="tsd-signature-type" data-tsd-kind="Type alias">Key</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="../index.html#Key" class="tsd-signature-type" data-tsd-kind="Type alias">Key</a><span class="tsd-signature-symbol">)</span><a href="#linkFromKeyProperty" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></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> <div><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> </div><dl class="tsd-comment-tags"><dt class="">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 id="linkFromPortIdProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> link<wbr/>From<wbr/>Port<wbr/>Id<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-symbol">(</span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, b<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><span class="tsd-signature-symbol">)</span><a href="#linkFromPortIdProperty" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"