Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

GoJS: How can I change Node fill color?

I'm using GoJS to make the diagram.

My diagram configuration (the example from the official documentation):

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

I'm creating the nodes in the following way:

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

And now I need programmatically change the fill color for specific node. I'm trying this code:

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

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

But after that, my chart doesn't display. And there are no error in console. Should I set the new shape for the node? Or how can I do that? Thank you for your help!

like image 659
Alex Vitruk Avatar asked Dec 28 '16 18:12

Alex Vitruk


People also ask

Why can’t I see the position of a node in gojs?

This text is displayed if your browser does not support the Canvas HTML element. If the position or location of a Node is not Point.isReal, it will not be seen, because GoJS will not know where to draw the node.

What is the Colors module used for in NodeJS?

The colors module is used to style and color the NodeJS console. It is a nice library for better interaction with your node.js project.

How to create a NodeJS application in Linux?

Step 1: Installation and Initialization: Open the terminal and create a node app because at the end we are going to work inside the NodeJS application This command will ask for few configurations about the project and you can fill them easily, otherwise use the -y flag to set default configurations.

How to add colors to an app using JavaScript?

Create a javascript file (let’s name it app.js) to write the entire code inside that. Step 2: Import module in the application: Import the module with require keyword and with this, you are ready to use the colors module.


3 Answers

Please specify the fill color in the nodeArray

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

Then add binding to the textBlock as

 $(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 })
    );
like image 50
Geethu Jose Avatar answered Sep 26 '22 12:09

Geethu Jose


You can use switch statement based on the node you want to fill based on the property value. Assuming you have a property named 'namedStates' based on which you node color should change, here is my example:

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

    }
})),
like image 31
raga Avatar answered Sep 26 '22 12:09

raga


You need to add a data binding for fill or the value in the node data is meaningless. After all, what would it mean to have data.fill if you had multiple shapes with multiple different fills?

So add new go.Binding("fill") to the relevant shape you want to change:

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

But after that, my chart doesn't display.

I don't know why that would be happening. Use go-debug.js to see more warnings.

See also this tutorial on GraphObject manipulation, including using setDataProperty: http://gojs.net/latest/learn/graphobject.html

like image 38
Simon Sarris Avatar answered Sep 25 '22 12:09

Simon Sarris