ポートの作成

リンクが作成されると、そのリンクは、AutomaticPort のインスタンスであるデフォルトのポートに接続されます。 通常、明示的なアンカーを指定することが最適です。例えば、2 つのリンクが同じノードに接続される場合、別個の接続ポイントが必要でしょう。
ノードの境界に固定接続ポイントを定義するには、次のようにします。
  • createLink 関数内に BasicPort クラスのインスタンスを作成します。
    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);
    setPosition 関数は、ノードの境界上の相対位置を指定します。 例えば、setPosition({x:0, y:0.5}) は、ノードの左側、縦位置の中間にあるポートを定義します。 setOffset 関数は、オプションのオフセットを指定し、例えば、setOffset({x:0, y:10}) は、10 ピクセル下にポートをシフトします。
以下に示すのは、明示的な境界アンカーを設定した結果のグラフです。
それぞれにラベルが設定された「ノード 1」、「ノード2」、「ノード 3」、「ノード 4」の 4 つの長方形ノードで構成されるグラフ。「ノード 1」はグラフの左側、「ノード 2」は上部、「ノード 3」は下部、「ノード 4」は右側にあります。
「ノード 1」は、矢印に先端のついたリンクにより、「ノード 2」および「ノード 3」に接続されています。「ノード 2」および「ノード 3」は、矢印に先端のついたリンクにより、「ノード 4」に接続されています。リンクの接続ポイントは、個別になっています。