Creating ports

When the link is created, it is connected to a default port, which is an instance of AutomaticPort. It is often best to specify explicit anchors. For example, when two links are connected to the same node, you might want distinct connection points.
To define fixed connection points on the bounds of a node:
  • Create instances of the BasicPort class in the createLink function
    var createLink = function(start, end, startOffsetY, endOffsetY) 
             var link = graph.createLink();
             
             var startPort = new ibm_ilog.diagram.BasicPort();
             startPort.setPosition({x:1, y:0.5});
             startPort.setOffset({x:0, y:startOffsetY});
             
             start.addPort(startPort);
             link.setStartPort(startPort);
             
             var endPort = new ibm_ilog.diagram.BasicPort();
             endPort.setPosition({x:0, y:0.5});
             endPort.setOffset({x:0, y:endOffsetY});
             
             end.addPort(endPort);
             link.setEndPort(endPort);
             
             return link;
          };
          
          var createNodesAndLinks = function() {
             var node1 = createNode("Node 1", 100, 200);
             var node2 = createNode("Node 2", 300, 100);
             var node3 = createNode("Node 3", 300, 300);
             var node4 = createNode("Node 4", 500, 200);
             var link1 = createLink(node1, node2, -10,  0);
             var link2 = createLink(node1, node3,  10,  0);
             var link3 = createLink(node2, node4,  0, -10);
             var link3 = createLink(node3, node4,  0,  10);
          };
          dojo.addOnLoad(createNodesAndLinks);
    The setPosition function specifies a relative position on the bounds of the node. For example, setPosition({x:0, y:0.5}) defines a port on the left side and at the vertical middle of the node. The setOffset function specifies an optional offset, for example, setOffset({x:0, y:10}) shifts the port down by 10 pixels.
Here is the resulting graph with explicit bounds anchors:
A graph
made up of four rectangular nodes, each having a label on them: Node
1, Node 2, Node 3, Node 4. Node 1 is located on the left, Node 2 at
the top, Node 3 at the bottom, and Node 4 on the right of the graph.
Node 1 is connected to Node 2 and to Node 3 by links with an arrow
tip. Node 2 and Node 3 are connected to Node 4 by links with an arrow
tip. The connection points of the links are distinct.