GoJS：如何更改节点填充颜色？

我图配置（从官方文档的例子）：

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()) 
     ); 
//...... 
}

我创建以下列方式中的节点：

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); 
    }

现在我需要以编程方式更改填充颜色为特定节点。我试试这个代码：

var data = myDiagram.model.findNodeDataForKey(0); 

    myDiagram.model.setDataProperty(data, "fill", "green");

但之后，我的图表不显示。并且在控制台中没有错误。我应该为节点设置新形状吗？或者我该怎么做？感谢您的帮助！

来源

2016-12-28 Alex Vitruk

请注明在nodeArray填充颜色

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

然后添加绑定到TextBlock作为

$(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 }) 
    );

来源

2017-02-28 06:50:09

谢谢@Geethu jose –

您需要添加数据绑定以进行填充或者节点数据中的值没有意义。毕竟，如果你有多个不同的填充形状，那么data.fill意味着什么？

所以添加new go.Binding("fill")到要改变相关的形状：

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()) 
     ); 
//...... 
}

但在那之后，我的图表没有显示。

我不知道为什么会发生这种情况。使用go-debug.js查看更多警告。

另见GraphObject操纵本教程中，包括使用setDataProperty：http://gojs.net/latest/learn/graphobject.html

来源

2016-12-28 18:53:03

可以根据属性值使用基于要填充的节点的switch语句。假设你有一个名为'namedStates'的属性，根据你的节点颜色应该改变，这里是我的例子：

$(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'; 

    } 
})),

来源

2017-03-20 10:33:15 raga

GoJS：如何更改节点填充颜色？

回答

相关问题