GoJS: Wie kann ich die Farbe der Knotenfarbe ändern?

Question

Ich verwende GoJS, um das Diagramm zu erstellen.

Meine Diagramm-Konfiguration (das Beispiel von der offiziellen Dokumentation):

function init() { 
    //...... 
    // define the Node template 
    myDiagram.nodeTemplate = 
     $(go.Node, "Auto", 
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 
      // define the node's outer shape, which will surround the TextBlock 
      $(go.Shape, "RoundedRectangle", 
       { 
        parameter1: 20, // the corner has a large radius 
        fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }), 
        stroke: null, 
        portId: "", // this Shape is the Node's port, not the whole Node 
        fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, 
        toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true, 
        cursor: "pointer" 
       }), 
      $(go.TextBlock, 
       { 
        font: "bold 11pt helvetica, bold arial, sans-serif", 
        editable: true // editing the text automatically updates the model data 
       }, 
       new go.Binding("text").makeTwoWay()) 
     ); 
//...... 
} 

ich die Knoten in der folgenden Art und Weise zu erstellen:

var nodeOperations = new Object(); 

    for (var i = 0; i < countState; i++) {   
      var json = {'id': i, 'loc': nodesCenters[i].x +' '+nodesCenters[i].y, 'text': markedStateTable['digitStates'][i] + ', ' + markedStateTable['namedStates'][i]}; 

      nodes.push(json); 
    } 

Und jetzt ich ändern müssen programmatisch die Füllfarbe für bestimmten Knoten. Ich versuche diesen Code:

Aber danach wird mein Diagramm nicht angezeigt. Und es gibt keinen Fehler in der Konsole. Sollte ich die neue Form für den Knoten festlegen? Oder wie kann ich das tun? Danke für Ihre Hilfe!

Answer 1

Bitte geben Sie die Füllfarbe in der nodeArray

var nodeDataArray = [ 
    { key: 1, text: "Name", fill: "#ff5722", stroke: "#4d90fe", description: "geethu" }]; 

Dann Textblock hinzufügen Bindung als

$(go.Shape, "RoundedRectangle", { 
        fill: "#cce6ff" // the default fill, if there is no data-binding 
     }, new go.Binding("fill", "fill")) 

myDiagram.nodeTemplate = 

    $(go.Node, "Horizontal", { 
      isTreeExpanded: false, 
      click: showDetail 
     }, 
     $(go.Panel, "Auto", 
      $(go.Shape, "RoundedRectangle", { 
       fill: "#cce6ff", // the default fill, if there is no data-binding 
       stroke: "#6699ff", 
       height: 40, 
       strokeWidth: 2, 
       portId: "", 
       cursor: "pointer", // the Shape is the port, not the whole Node 
      }, new go.Binding("fill", "fill")), 
      $(go.TextBlock, { 
        editable: true 
       }, 
       new go.Binding("text", "text")) 
     ), 
     $("TreeExpanderButton", { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top }, { visible: true }) 
    ); 

Answer 2

Sie müssen eine Datenbindung für Füllung hinzufügen oder der Wert in den Knoten Daten ist bedeutungslos. Nach allem, was würde es bedeuten, data.fill zu haben, wenn Sie mehrere Formen mit mehreren verschiedenen Füllungen hätten?

hinzufügen So new go.Binding("fill") auf die entsprechende Form, die Sie ändern möchten:

function init() { 
    //...... 
    // define the Node template 
    myDiagram.nodeTemplate = 
     $(go.Node, "Auto", 
      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify), 
      // define the node's outer shape, which will surround the TextBlock 
      $(go.Shape, "RoundedRectangle", 
       { 
        parameter1: 20, // the corner has a large radius 
        fill: $(go.Brush, "Linear", { 0: "rgb(254, 201, 0)", 1: "rgb(254, 162, 0)" }), 
        stroke: null, 
        portId: "", // this Shape is the Node's port, not the whole Node 
        fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, 
        toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true, 
        cursor: "pointer" 
       }, 
      new go.Binding("fill") // NEW 
      ), 
      $(go.TextBlock, 
       { 
        font: "bold 11pt helvetica, bold arial, sans-serif", 
        editable: true // editing the text automatically updates the model data 
       }, 
       new go.Binding("text").makeTwoWay()) 
     ); 
//...... 
} 

Aber danach, mein Diagramm nicht angezeigt.

Ich weiß nicht, warum das passieren würde. Verwenden Sie go-debug.js, um weitere Warnungen anzuzeigen.

Sehen Sie dieses Tutorial auch auf Graph Manipulation, einschließlich setDataProperty mit: http://gojs.net/latest/learn/graphobject.html

Answer 3

Sie können die switch-Anweisung basierend auf dem Knoten verwenden, den Sie basierend auf dem Eigenschaftswert füllen möchten. Angenommen, Sie haben eine Eigenschaft mit dem Namen 'namedStates', auf der sich die Farbe des Knotens ändern soll, hier mein Beispiel:

$(go.Shape, "Rectangle", { 
    name: "SHAPE", 
    fill: "red", 
    stroke: null, 
    fromLinkable: true, 
    toLinkable: true, 
    cursor: "pointer" 
}, new go.Binding("fill", "namedStates", function(type) { 
    switch (type) { 
     case 1: 
      return "#FF4081"; 
     case 2: 
      return "#303F9F"; 
     case 3: 
      return "#00796B"; 
     case 4: 
      return "#FF5722"; 
     case 5: 
      return "#5D4037"; 
     case 6: 
      return "#7B1FA2"; 
     default: 
      return '#8BC34A'; 

    } 
})),