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
this is the image that i prefer
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