Ports erstellen

Wenn ein Link erstellt wird, wird er mit einem Standardport verbunden, der eine Instanz von AutomaticPort ist. Häufig empfiehlt es sich, explizite Anker anzugeben. Wenn beispielsweise zwei Links mit demselben Knoten verbunden werden, können Sie eindeutige Verbindungspunkte verwenden.
Gehen Sie wie folgt vor, um feste Verbindungspunkte an den Grenzen eines Knotens zu definieren:
  • Erstellen Sie Instanzen der Klasse BasicPort in der Funktion createLink.
    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);
    Die Funktion setPosition gibt eine relative Position an den Grenzen des Knotens an. So definiert setPosition({x:0, y:0.5}) beispielsweise einen Port auf der linken Seite und in der vertikalen Mitte des Knotens. Die Funktion setOffset gibt einen optionalen Versatz an. setOffset({x:0, y:10}) versetzt den Port beispielsweise um 10 Pixel nach unten.
Im Folgenden sehen Sie den Ergebnisgraphen mit expliziten Ankern an den Grenzen des Knotens:
Ein Graph, der sich aus vier rechteckigen
Knoten zusammensetzt, die jeweils eine Beschriftung haben: Knoten 1, Knoten 2, Knoten 3 und Knoten 4.
Knoten 1 befindet sich links, Knoten 2 oben, Knoten 3 unten und Knoten 4 rechts im Graphen.
Knoten 1 ist mit Knoten 2 und Knoten 3 über Links mit einer Pfeilspitze verbunden.
Knoten 2 und Knoten 3 sind mit Knoten 4 über Links mit einer Pfeilspitze verbunden.
Die Verbindungspunkte der Links sind eindeutig.