カスタム・ノードおよびリンク・テンプレートの定義

テンプレートは、ノード、リンク、またはサブグラフのコンテンツを記述する JSON ストリングです。 デフォルトのテンプレートは、ibm_ilog.diagram/templates/template.js ソース・ファイルにあります。テンプレートには、外観データ・プロパティーに対するバインディングを入れることができます (テンプレートおよびバインディングの使用を参照)。
ノードおよびリンクに対する特定のグラフィックスを必要とするアプリケーションの場合、デフォルトのノードおよびリンク・テンプレート、およびそのプロパティーでは不十分です。
カスタム・グラフィックスを作成するには、次のようにします。
  • template 引数を createNode()createLink()、および createSubgraph() 関数に渡します。
    以下に示すのは。カスタム・ノード・テンプレートの例です。
    var nodeTemplate = "[{"+
    "            dojoAttachPoint: 'baseShape',"+
    "            shape: {"+
    "                type: 'ellipse',"+
    "                cx: 0,"+
    "                cy: 0,"+
    "                rx: 10,"+
    "                ry: 10"+
    "            },"+
    "            stroke: {"+
    "                color: '#00',"+
    "                width: 3"+
    "            },"+
    "            fill: '{{backgroundColor}}',"+
    "            selectedStyle: {"+
    "                fill: '{{selectedBackgroundColor}}'"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: 'textShape',"+
    "            shape: {"+
    "                type: 'text',"+
    "                text: '{{label}}',"+
    "                x: 5,"+
    "                y: 30,"+
    "                align: 'middle'"+
    "            },"+
    "            fill: '{{textColor}}',"+
    "            font: {"+
    "                type: 'font',"+
    "                weight: 'bold',"+
    "                size: '12pt',"+
    "                family: 'Arial'"+
    "            }"+
    "        }]";
    
    ...
                var node = graph.createNode(nodeTemplate);
    カスタム・ノード・テンプレートを作成する場合、以下のことに注意してください。
    以下に示すのは。カスタム・リンク・テンプレートの例です。
    var linkTemplate = "[{"+
    "            dojoAttachPoint: '_path',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: 0,    y: 0}, {x: 100, y: 0}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: {{strokeWidth}},"+
    "                style: 'ShortDot'"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: {{selectedStrokeWidth}},"+
    "                    style: 'ShortDot'"+
    "                }"+
    "            }"+
    "        }, {"+
    "            dojoAttachPoint: '_endArrow',"+
    "            shape: {"+
    "                type: 'polyline',"+
    "                points: [{x: -8,y: 5}, {x: 0,y: 0}, {x: -8,y: -5}]"+
    "            },"+
    "            stroke: {"+
    "                color: '{{strokeColor}}',"+
    "                width: 2"+
    "            },"+
    "            selectedStyle: {"+
    "                stroke: {"+
    "                    color: '{{selectedStrokeColor}}',"+
    "                    width: 2"+
    "                }"+
    "            }"+
    "        }]";
    
    ...
                var link = graph.createLink(linkTemplate);
以下に示すのは、カスタム・ノードおよびリンク・テンプレートを使用した場合の結果のグラフです。
カスタマイズされたノードおよびリンクのあるグラフ。
それぞれ下にラベルが設定された「ノード 1」、「ノード 2」、「ノード 3」、「ノード 4」の 4 つの円形ノードがあり、「ノード 1」はグラフの左側、「ノード 2」は上部、「ノード 3」は下部、「ノード 4」は右側にあります。
「ノード 1」は、矢印に先端のついたドット・リンクにより、「ノード 2」および「ノード 3」に接続されています。「ノード 2」および「ノード 3」は、矢印に先端のついたドット・リンクにより、「ノード 4」に接続されています。