Knotenposition und andere Grafikeigenschaften festlegen

Die Position des Knotens wird im Allgemeinen anhand von Informationen in einem Datenspeicherelement bestimmt. Die Positionierung findet implizit, über ein vordefiniertes Layout unter Verwendung der Datenbindung in einer Schablone oder direkter in JavaScript statt, wenn der Knoten erstellt wird. Wenn die X- und Y-Positionen direkt aus dem Datenspeicherelement abgerufen werden, verwenden Sie die Eigenschaften xBinding und and yBinding, um die Datenspeicherattribute anzugeben, die die X- und Y-Positionen definieren, wenn der Knoten bzw. Untergraph erstellt wird. In beschreibbaren Datenspeichern werden sie auch verwendet, um die Werte zu speichern, wenn sie geändert werden.
<div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="xpos" yBinding="ypos"  ...>
</div>

Knotenposition definieren

Gehen Sie wie folgt vor, um eine Position in der Mitte eines Knotens anzugeben:
  • Verwenden Sie das Attribut centerOnLocation.
    In komplexeren Situationen kann eine einzige Funktion für das Lesen und Schreiben von Werten definiert werden.
    <script type="text/javascript">
    var persistX = function(nodesStore, item, value){
      var retVal;
      if (value) {
        retVal = nodesStore.setValue(item, "xpos", value);
      }
      else {
        retVal = nodesStore.getValue(item, "xpos");
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' xBinding="persistX" ...>
    </div>

Grafikeigenschaften von Knoten und Links definieren

Gehen Sie wie folgt vor, um allgemeine Grafikeigenschaften von Knoten und Links zu definieren:
  • Verwenden Sie nodesGraphBinding oder linksGraphBinding, um ein Datenspeicherattribut anzugeben, das Sie für das Speichern einer Liste mit Grafikeigenschaften verwenden können.
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeGraphBinding="gfxNodeData" nodesGraphProperties="backgroundColor,textColor"  ...>
    </div>
    Es kann eine einzige Funktion für das Lesen und Schreiben der Grafikeigenschaft definiert werden.
    <script type="text/javascript">
    var persistNodeProps = function(nodesStore, item, value){
      var retVal;
      if (value) {
         var jvalue = dojo.toJson(value);
         retVal = nodesStore.setValue(item, "gfxNodeData", jvalue);
      }
      else {
          var retValj = nodesStore.getValue(item, "gfxNodeData");
          retVal = dojo.fromJson(retValj);
      }
      return retVal;
    };
    </script>
    <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodesGraphBinding="persistNodeProps" nodesGraphProperties="bounds,backgroundColor,textColor" ...>
    </div>
    Der an die Funktion übergebene Wert kann ein komplexes JavaScript-Objekt wie das folgende sei:
    {
      "backgroundColor": "#FFFFFF",
      "textColor": "#000000",
      "bounds": {"x": "320", "y": "140", "width": "120", "height": "80"}
    }