How to resize nodes dynamically in Incremental Tree

GoJS
#1

I have created an Incremental Tree in this way:

myDiagram.nodeTemplate =
  $(go.Node, "Spot",
   {
    selectionObjectName: "PANEL",
    isTreeExpanded: true,
    isTreeLeaf: true
   },
   // the node's outer shape, which will surround the text
   $(go.Panel, "Horizontal",
   { name: "PANEL" },
   $(go.Shape, "Circle",
   { fill: "whitesmoke", stroke: "black" },
    new go.Binding("fill", "color", function (dist) {
    return go.Brush.randomColor();//blues[dist];
    })),
    $(go.TextBlock,
    { font: "6pt sans-serif" },
     new go.Binding("text", "text"))
     ),
     // the expand/collapse button, at the top-right corner
     $("TreeExpanderButton",
     {
      width: 20, height: 20,
      alignment: go.Spot.TopRight,
      alignmentFocus: go.Spot.Center
      },
    { visible: true })  // end TreeExpanderButton
    );  // end Node

And adding the data in it as:

item = {}
item["key"] = 1;
item["text"] = "Test1";
item["cnt"] = 50;
item["color"] = go.Brush.randomColor();
item["parent"] = 0;
item["share"] = 0;
nodeDataArray.push(item);
myDiagram.model = new go.TreeModel(nodeDataArray);

It is making the tree as:
https://i.stack.imgur.com/Plt2n.png

However, I want to change the shape of all these nodes based on the share value. This could be percentage of any default value. So how can I change the size of all the nodes after inserting all the nodes in it. Also, can anyone tell me, how to place this text on the nodes and not outside of it, I want all the nodes to have a default size at the start, then resize all of them based on the share. The text could flow outside of the shape.

#2

First, I hope you recognize that by creating a new model each time you add a node, the diagram is discarding all of the old Nodes and Links and creating new Nodes and Links for all of the data in the model. That’s a very inefficient way to build up a tree – it’s better to just call Model.addNodeData with each new node data object.

If there is a data Binding in your node template that depends on the “share” data property, then you can modify a node by calling Model.setDataProperty:

  myDiagram.model.setDataProperty(someItem, "share", 17);

I highly recommend reading Get Started with GoJS and all of the pages of the Introduction, starting at GoJS Introduction -- Northwoods Software, to understand how you can define your node template to depend on your data properties.

#3

Thanks for the reply Walter, yes I do realize that and I am not creating new model each time when I add a node, the line “myDiagram.model = new go.TreeModel(nodeDataArray);” is called only once at the last when all the data is inserted in nodeDataArray according to my requirements. I just wanted to know after all the nodes are created alongwith this property ‘Share’ is associated with each node, I just wanted to loop on all the nodes and get its share value and then resize that node accordingly. How can I do that?

#4

I made it working by first giving the name of shape object as ‘SHAPE’ and then by adding the following code:

myDiagram.nodes.each(function (n) { n.findObject('SHAPE').height = n.data.share * 150 / 100; })