Angepasste Knoten- und Linkschablonen definieren

Die Schablone ist eine JSON-Zeichenfolge, die den Inhalt eines Knotens, eines Links oder eines Untergraphen beschreibt. Standardschablonen sind in der Quellendatei ibm_ilog.diagram/templates/template.js enthalten. Schablonen können Bindungen an die Darstellungsdateneigenschaften enthalten (siehe Schablonen und Bindungen verwenden).
Für Anwendungen, die bestimmte Grafiken für die Knoten und Links erfordern, sind die die Standardknoten- und -linkschablonen und die deren Eigenschaften nicht ausreichend.
Gehen Sie wie folgt vor, um angepasste Grafiken zu erstellen:
  • Übergeben Sie ein Argument template an die Funktionen createNode(), createLink() und createSubgraph().
    Im Folgenden sehen Sie ein Beispiel für eine angepasste Knotenschablone:
    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);
    Beachten Sie beim Erstellen angepasster Knotenvorlagen Folgendes:
    • Die Felder dojoAttachPoint identifizieren die Teile des Knotens, die als JavaScript-Eigenschaften verfügbar sind (siehe Schablonen und Bindungen verwenden). Für alle Knoten muss mindestens ein Teil baseShape definiert werden.
    • Die Werte zwischen den doppelten geschweiften Klammern, z. B. {{backgroundColor}}, sind Bindungen an die Knoteneigenschaften (siehe Schablonen und Bindungen verwenden).
    • Die Felder selectedStyle definieren die Darstellung des Knotens, wenn dieser ausgewählt wird (siehe Objekte auswählen).
    Im Folgenden sehen Sie ein Beispiel für eine angepasste Linkschablone:
    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);
Der Ergebnisgraph bei der Verwendung der angepassten Knoten- und Linkschablonen sieht folgendermaßen aus:
Ein Graph mit angepassten Knoten und Links.
Unter den vier kreisförmigen Knoten wird jeweils eine Beschriftung angezeigt: Knoten 1, Knoten 2, Knoten 3, Knoten 4. Knoten
1 befindet sich links, Knoten 2 oben, Knoten drei unten und Knoten 4 rechts im Graphen.
Knoten 1 ist mit Knoten 2 und Knoten 3 über gepunktete Links mit einer Pfeilspitze verbunden.
Knoten 2 und Knoten 3 sind mit Knoten 4 über gepunktete Links mit einer Pfeilspitze verbunden.