GoJS: 我该如何改变节点的填充颜色？

Question

我正在使用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");

但是之后，我的图表没有显示出来。控制台中也没有错误信息。我应该为节点设置新的形状吗？还是有其他方法可以解决这个问题？谢谢您的帮助！

- Alex Vitruk

Answer 1

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

- Geethu Jose

Answer 2

您可以使用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';

    }
})),

- raga

Answer 3

你需要为填充或节点数据中的值添加数据绑定，否则数据中的data.fill将毫无意义。毕竟，如果有多个形状和多种不同的填充，那么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

- Simon Sarris

---

在我看来，应该有一个选择器来选择具有所需值的元素...... new go.Binding("fill",[element])。 - alQemist

什么？你已经可以设置第二个参数对应数据属性了，例如：new go.Binding("fill", "color")。 - Simon Sarris