Treelayout do not work well when add node

Hi, walter
when i add nodes, the layout does not work like a tree, i was upset for sevral weeks, i want it look like a tree.

myDiagram =
            $$(go.Diagram, "myDiagramDiv",  // must name or refer to the DIV HTML element
                {
                    grid: $$(go.Panel, "Grid",
                        $$(go.Shape, "LineH", { stroke: "lightgray", strokeWidth: 0.5 }),
                        $$(go.Shape, "LineH", { stroke: "gray", strokeWidth: 0.5, interval: 10 }),
                        $$(go.Shape, "LineV", { stroke: "lightgray", strokeWidth: 0.5 }),
                        $$(go.Shape, "LineV", { stroke: "gray", strokeWidth: 0.5, interval: 10 })
                    ),
                    initialContentAlignment: go.Spot.TopCenter,
                    //initialAutoScale: go.Diagram.Uniform,
                    initialAutoScale: go.Diagram.None,//画布比例自适应 默认不适应
                    
                    layout: $$(go.TreeLayout, {
                        treeStyle: go.TreeLayout.StyleLayered,
                        arrangement: go.TreeLayout.ArrangementFixedRoots,
                        angle: 90,
                        isOngoing: true,
                        layerSpacing: 80,
                        
                        assignTreeVertexValues: function(v) {
                        	console.log('create');
                        	console.log('v.maxGenerationCount:' + v.maxGenerationCount);
                        	v.nodeSpacing = 20 * v.maxGenerationCount;
                        	if (v.childrenCount > 0) {
                                v.height += 64;
                                v.focusY += 64/2;
                              }
                        },
                        commitNodes: function() {
                            go.TreeLayout.prototype.commitNodes.call(this);
                            this.network.vertexes.each(function(v) {
                              var n = v.node;
                              console.log("坐标:" + n.location.x);
                              if (n && v.childrenCount > 0) {
                                n.location = new go.Point(n.location.x, n.location.y + 32/2);
                              }
                            });
                          }
                    }),
                    mouseOver: doMouseOver,
                    allowDrop: true,  // must be true to accept drops from the Palette
                    "draggingTool.dragsLink": false,
                    "draggingTool.isGridSnapEnabled": false,
                    "linkingTool.isUnconnectedLinkValid": false,
                    "linkingTool.portGravity": 20,
                    "relinkingTool.isUnconnectedLinkValid": false,
                    "relinkingTool.portGravity": 20,
                    "relinkingTool.fromHandleArchetype":
                        $$(go.Shape, "Diamond", { segmentIndex: 0, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "tomato", stroke: "darkred" }),
                    "relinkingTool.toHandleArchetype":
                        $$(go.Shape, "Diamond", { segmentIndex: -1, cursor: "pointer", desiredSize: new go.Size(8, 8), fill: "darkred", stroke: "tomato" }),
                    "linkReshapingTool.handleArchetype":
                        $$(go.Shape, "Diamond", { desiredSize: new go.Size(7, 7), fill: "lightblue", stroke: "deepskyblue" }),
                    rotatingTool: $$(TopRotatingTool),  // defined below
                    "rotatingTool.snapAngleMultiple": 1500,
                    "rotatingTool.snapAngleEpsilon": 1500,
                    "LinkDrawn": showLinkLabel,  // this DiagramEvent listener is defined below
                    "LinkRelinked": showLinkLabel,
                    "undoManager.isEnabled": true,
                });
myDiagram.model.addNodeData(getNodeInfoByType(abnormalonevalue));
var linkData = {}; 
linkData.from = currentOperateElementKey;
linkData.to = nodeDataArray[nodeDataArray.length - 1].key;
linkData.text = "系统异常";
linkData.status = "sys_err";
myDiagram.model.addLinkData(linkData);

this is the image but not i want
1

this is the image that i prefer
2

i create a button for use treelayout but it work well when first into my page, when i add a node ,it doesn’t work
this is my button’s code

function addTreeLayout(){
        myDiagram.layout = go.GraphObject.make(go.TreeLayout, {
            treeStyle: go.TreeLayout.StyleLayered,
            arrangement: go.TreeLayout.ArrangementFixedRoots,
            angle: 90,
            isOngoing: true,
            layerSpacing: 80,
            assignTreeVertexValues: function(v) {
            	v.nodeSpacing = 20 * v.maxGenerationCount;
            	if (v.childrenCount > 0) {
                    v.height += 64;
                    v.focusY += 64/2;
                }
            }
        });
    }

thanks in advance

So the problem is that an automatic layout is not happening when you add a node and a link. Usually the problem is that Layout.isOngoing has been set to false, but that is not the case for your TreeLayout, so that is not the problem. Then the other reason that an automatic layout might not happen is that you have set Part.layoutConditions or Part.isLayoutPositioned on your node template and on your link template. Is that the case for your template(s)? Read more about automatic layouts at: GoJS Layouts -- Northwoods Software

Once you have assigned the Diagram.layout, it is unusual to want to set it again. Unless you really want to remove the override of TreeLayout.commitNodes? That seems odd to me.

First of all, thank you very much for your help. I have successfully solved this problem.

But there was a new problem,

I found that if a new node was created at the place marked in Figure 1, the new node would shift other adjacent nodes a little distance, resulting in irregular connection lines and nodes. The effect is shown in Figure 2

Triggering the TreeLayout again has no effect


I have never seen anything like that. What is your code to add a node, that causes this behavior?

yes,Walter, just like you said, and also when the node name is too long

How can I help you unless you provide enough information about the problem?

It would actually be best if you could provide a minimal stand-alone sample that demonstrates the problem.

hi, Walter, I have an idea where the problem is. When I set these two configuration items, the tree layout works fine, and I think my previous code is not correct either.
The two configurations are as follows.



And see below for the previous code

Thank you so much for the solution