markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® GraphLinksModel Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <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">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> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="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> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class GraphLinksModel </h2>  <p class="classsummary"> <span class="extends"> Extends <a href="../symbols/Model.html" class="linkConstructor">Model</a>.</span> 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="../symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="../symbols/Node.html" class="linkConstructor">Node</a>, but they could be represented by simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="../symbols/Group.html" class="linkConstructor">Group</a>s. Link data should be represented by instances of <a href="../symbols/Link.html" class="linkConstructor">Link</a>. <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="../symbols/GraphLinksModel.html#linkFromKeyProperty" class="linkProperty">linkFromKeyProperty</a> property names the property on the link data whose value is the key of the "from" node. The <a href="../symbols/GraphLinksModel.html#linkToKeyProperty" class="linkProperty">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> For example, one can define a graph consisting of two nodes with one link connecting them: <pre class="javascript"> model.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" } ]; model.linkDataArray = [ { from: "Alpha", to: "Beta" } ]; </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="../symbols/GraphLinksModel.html#nodeIsGroupProperty" class="linkProperty">nodeIsGroupProperty</a> property names the property on a node data that is true if that node data represents a group. The <a href="../symbols/GraphLinksModel.html#nodeGroupKeyProperty" class="linkProperty">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> 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: <pre> model.nodeDataArray = [ { key: "Group1", isGroup: true}, { key: "Alpha", group: "Group1" }, { key: "Beta", group: "Group1" }, { key: "Gamma" } ]; model.linkDataArray = [ { from: "Alpha", to: "Beta" }, { from: "Group1", to: "Gamma" } ]; </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="../symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">linkFromPortIdProperty</a> and/or <a href="../symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">linkToPortIdProperty</a> properties before the model is able to get the "port id" information from the link data. <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". <pre> model.linkFromPortIdProperty = "fromPort"; // necessary to remember portIds model.linkToPortIdProperty = "toPort"; model.nodeDataArray = [ { key: 1, constant: 5 }, // a constant input node { key: 2, constant: 2 }, // another constant node { key: 3, operation: "subtract" }, { key: 4, value: 3 } // the output node ]; model.linkDataArray = [ { from: 1, to: 3, toPort: "subtrahend" }, { from: 2, to: 3, toPort: "minuend" }, { from: 3, to: 4, fromPort: "difference" } ]; </pre> 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> 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="../symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> and <a href="../symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>, but there is only the one method for Links, <a href="../symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>. <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="../symbols/GraphLinksModel.html#findLinkDataForKey" class="linkMethod">findLinkDataForKey</a>, you need to set <a href="../symbols/GraphLinksModel.html#linkKeyProperty" class="linkProperty">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="../symbols/GraphLinksModel.html#makeUniqueLinkKeyFunction" class="linkProperty">makeUniqueLinkKeyFunction</a> to a function that returns a unique identifier. <p> This model does not support the modification of whether a node data object is a group. <p> This model cannot detect the modification of the <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">linkDataArray</a> array or the modification of any link data object. If you want to add or remove link data from the <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">linkDataArray</a>, call the <a href="../symbols/GraphLinksModel.html#addLinkData" class="linkMethod">addLinkData</a> or <a href="../symbols/GraphLinksModel.html#removeLinkData" class="linkMethod">removeLinkData</a> methods. If you want to modify the node a link connects to, call the <a href="../symbols/GraphLinksModel.html#setFromKeyForLinkData" class="linkMethod">setFromKeyForLinkData</a> and/or <a href="../symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">setToKeyForLinkData</a> methods. If you want to change the membership of a node data in a group, call the <a href="../symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">setGroupKeyForNodeData</a> method. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class GraphLinksModel."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> GraphLinksModel(nodedataarray, linkdataarray) </div> </td> <td class="description"> <div class="description"> <p><p>This constructs an empty GraphLinksModel unless one provides arguments as the initial data array values for the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> and <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> properties.<span class="nodetails" id="xconGraphLinksModel"><a class="morelink" onclick="hst('conGraphLinksModel')">More...</a></span> <span class="details" id="conGraphLinksModel"></span> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Array.<Object>=}</span> <b>nodedataarray</b> </dt> <dd>an optional Array containing JavaScript objects to be represented by Nodes.</dd> <dt> <span class="light fixedFont">{Array.<Object>=}</span> <b>linkdataarray</b> </dt> <dd>an optional Array containing JavaScript objects to be represented by Links.</dd> </dl> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class GraphLinksModel."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="archetypeNodeData" > <td class="name"> <div class="name"> archetypeNodeData </div> <div class="attributes"> <span class="light">{Object}</span> <span class="since" title="since">1.1</span> </div> </td> <td class="description"> <div class="description">  <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.<span class="nodetails" id="xproparchetypeNodeData"><a class="morelink" onclick="hst('proparchetypeNodeData')">More...</a></span> <span class="details" id="proparchetypeNodeData"> </span><div class="details" id="dproparchetypeNodeData"><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="../symbols/Model.html#findNodeDataForKey" class="linkMethod">Model.findNodeDataForKey</a> returns null, it will call <a href="../symbols/Model.html#copyNodeData" class="linkMethod">Model.copyNodeData</a> on this property value and <a href="../symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a> on the result.</div> </div> </td> </tr> <tr id="copyLinkDataFunction" > <td class="name"> <div class="name"> copyLinkDataFunction </div> <div class="attributes"> <span class="light">{function(Object, GraphLinksModel):Object | null}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets a function that makes a copy of a link data object.<span class="nodetails" id="xpropcopyLinkDataFunction"><a class="morelink" onclick="hst('propcopyLinkDataFunction')">More...</a></span> <span class="details" id="propcopyLinkDataFunction"> </span><div class="details" id="dpropcopyLinkDataFunction"><p> You may need to set this property in order to ensure that a copied <a href="../symbols/Link.html" class="linkConstructor">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="../symbols/GraphLinksModel.html#copyLinkData" class="linkMethod">copyLinkData</a> to make a shallow copy of a JavaScript Object. The default value is null.</div> </div> </td> </tr> <tr id="linkCategoryProperty" > <td class="name"> <div class="name"> linkCategoryProperty </div> <div class="attributes"> <span class="light">{string|function(Object,string=):string}</span> </div> </td> <td class="description"> <div class="description">  <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.<span class="nodetails" id="xproplinkCategoryProperty"><a class="morelink" onclick="hst('proplinkCategoryProperty')">More...</a></span> <span class="details" id="proplinkCategoryProperty"> 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="../symbols/GraphLinksModel.html#getCategoryForLinkData" class="linkMethod">getCategoryForLinkData</a> will return an empty string for all link data objects. </span><div class="details" id="dproplinkCategoryProperty"><p> If you want to set this property you must do so before using the model, and especially before you assign <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>. Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/GraphLinksModel.html#getCategoryForLinkData" class="linkMethod">getCategoryForLinkData</a></li> <li><a href="../symbols/GraphLinksModel.html#setCategoryForLinkData" class="linkMethod">setCategoryForLinkData</a></li> </ul> </div> </div> </td> </tr> <tr id="linkDataArray" > <td class="name"> <div class="name"> linkDataArray </div> <div class="attributes"> <span class="light">{Array.<Object>}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the array of link data objects that correspond to <a href="../symbols/Link.html" class="linkConstructor">Link</a>s in the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xproplinkDataArray"><a class="morelink" onclick="hst('proplinkDataArray')">More...</a></span> <span class="details" id="proplinkDataArray"> The initial value is an empty Array.</span> </div> </td> </tr> <tr id="linkFromKeyProperty" > <td class="name"> <div class="name"> linkFromKeyProperty </div> <div class="attributes"> <span class="light">{string|function(Object,(string|number)=):(string|number)}</span> </div> </td> <td class="description"> <div class="description">  <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.<span class="nodetails" id="xproplinkFromKeyProperty"><a class="morelink" onclick="hst('proplinkFromKeyProperty')">More...</a></span> <span class="details" id="proplinkFromKeyProperty"> 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="../symbols/GraphLinksModel.html#getFromKeyForLinkData" class="linkMethod">getFromKeyForLinkData</a> will return undefined for all link data objects. </span><div class="details" id="dproplinkFromKeyProperty"><p> If you want to set this property you must do so before using the model, and especially before you assign <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>. Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/GraphLinksModel.html#getFromKeyForLinkData" class="linkMethod">getFromKeyForLinkData</a></li> <li><a href="../symbols/GraphLinksModel.html#setFromKeyForLinkData" class="linkMethod">setFromKeyForLinkData</a></li> </ul> </div> </div> </td> </tr> <tr id="linkFromPortIdProperty" > <td class="name"> <div class="name"> linkFromPortIdProperty </div> <div class="attributes"> <span class="light">{string|function(Object,string=):string}</span> </div> </td> <td class="description"> <div class="description">  <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.<span class="nodetails" id="xproplinkFromPortIdProperty"><a class="morelink" onclick="hst('proplinkFromPortIdProperty')">More...</a></span> <span class="details" id="proplinkFromPortIdProperty"> 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="../symbols/GraphLinksModel.html#linkFromKeyProperty" class="linkProperty">linkFromKeyProperty</a> or <a href="../symbols/GraphLinksModel.html#linkToKeyProperty" class="linkProperty">linkToKeyProperty</a>. If the value is an empty string, <a href="../symbols/GraphLinksModel.html#getFromPortIdForLinkData" class="linkMethod">getFromPortIdForLinkData</a> will return an empty string for all link data objects. </span><div class="details" id="dproplinkFromPortIdProperty"><p> If you want to set this property you must do so before using the model, and especially before you assign <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>. Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/GraphLinksModel.html#getFromPortIdForLinkData" class="linkMethod">getFromPortIdForLinkData</a></li> <li><a href="../symbols/GraphLinksModel.html#setFromPortIdForLinkData" class="linkMethod">setFromPortIdForLinkData</a></li> </ul> </div> </div> </td> </tr> <tr id="linkKeyProperty" > <td class="name"> <div class="name"> linkKeyProperty </div> <div class="attributes"> <span class="light">{string|function(Object,(string|number)=):(string|number)}</span> <span class="since" title="since">1.6</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the name of the data property that returns a unique id number or string for each link data object.<span class="nodetails" id="xproplinkKeyProperty"><a class="morelink" onclick="hst('proplinkKeyProperty')">More...</a></span> <span class="details" id="proplinkKeyProperty"> 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. When this property has a value of an empty string (the default value), <a href="../symbols/GraphLinksModel.html#getKeyForLinkData" class="linkMethod">getKeyForLinkData</a> will return undefined, and <a href="../symbols/GraphLinksModel.html#findLinkDataForKey" class="linkMethod">findLinkDataForKey</a> will always return null. </span><div class="details" id="dproplinkKeyProperty"><p> If you want to set this property you must do so before using the model, and especially before you assign <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>. Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/GraphLinksModel.html#getKeyForLinkData" class="linkMethod">getKeyForLinkData</a></li> </ul> </div> </div>