如何在增量树中动态调整节点大小答案

【问题标题】：How to resize nodes dynamically in Incremental Tree如何在增量树中动态调整节点大小
【发布时间】：2018-01-03 11:57:44
【问题描述】：

我以这种方式创建了一个增量树：

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

并将其中的数据添加为：

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

它使树为：

但是，我想根据份额值更改所有这些节点的形状。这可以是任何默认值的百分比。那么如何在插入所有节点后更改所有节点的大小。另外，谁能告诉我，如何将此文本放在节点上而不是在它之外，我希望所有节点在开始时都具有默认大小，然后根据共享调整所有节点的大小。文本可以在形状之外流动。

【问题讨论】：

标签： javascript gojs

【解决方案1】：

首先，我希望您认识到，通过每次添加节点时创建一个新模型，该图将丢弃所有旧节点和链接，并为模型中的所有数据创建新节点和链接。这是构建树的一种非常低效的方法——最好只对每个新的节点数据对象调用Model.addNodeData。

如果你的节点模板中有一个依赖于“share”数据属性的数据绑定，那么你可以通过调用Model.setDataProperty来修改一个节点：

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

我强烈建议阅读https://gojs.net/learn 和简介的所有页面，从https://gojs.net/intro 开始，以了解如何定义节点模板以依赖于您的数据属性。

【讨论】：

感谢 Walter 的回复，是的，我确实意识到了这一点，并且每次添加节点时我都不会创建新模型，即“myDiagram.model = new go.TreeModel(nodeDataArray);”这一行当根据我的要求将所有数据插入 nodeDataArray 时，最后只调用一次。我只是想知道在创建了所有节点之后，这个属性“共享”与每个节点相关联，我只想在所有节点上循环并获取其共享值，然后相应地调整该节点的大小。我该怎么做？

【解决方案2】：

我首先将形状对象的名称命名为“SHAPE”，然后添加以下代码来使其工作：

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

【讨论】：