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!
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.
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.
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.
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.
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 })
);
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';
}
})),
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With