树形布局 让key值是3的节点有个指向key是2的节点 出现一个箭头"nodeDataArray": [ {"key":1, "name":"Billy Aiken", "title":"Software", "parent":1}, {"key":2, "name":"Stan Wellback", "title":"Testing", "parent":1}, {"key":3, "name":"Marge Innovera", "title":"Hardware", "parent":2}, {"key":4, "name":"Evan Elpus", "title":"Quality", "parent":2}, {"key":5, "name":"Lotta B. Essen", "title":"Sales Rep", "parent":2} ]代码示例
时间: 2023-06-28 10:15:15 浏览: 103
这是一个渲染树形布局的示例代码,其中加入了绘制箭头的逻辑,使得key值为3的节点指向key值为2的节点:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tree Layout Example</title>
<script src="https://unpkg.com/gojs/release/go.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="width:500px; height:500px;"></div>
<script>
var $ = go.GraphObject.make;
var myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialAutoScale: go.Diagram.UniformToFill,
contentAlignment: go.Spot.Center,
layout:
$(go.TreeLayout,
{
angle: 90,
layerSpacing: 80,
nodeSpacing: 40,
setsPortSpot: false,
setsChildPortSpot: false
})
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "white" }),
$(go.TextBlock, { margin: 8 },
new go.Binding("text", "name")),
$(go.Panel, "Vertical",
{ visible: false },
$(go.TextBlock, { margin: 8, font: "italic 10pt sans-serif" },
new go.Binding("text", "title")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text", "key"))),
{
selectionChanged: function(node) {
if (node.isSelected) {
node.findObject("VERTICAL").visible = true;
} else {
node.findObject("VERTICAL").visible = false;
}
}
}
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5 },
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, { toArrow: "Standard" }),
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 10,
toShortLength: 3
});
var nodeDataArray = [
{"key":1, "name":"Billy Aiken", "title":"Software", "parent":1},
{"key":2, "name":"Stan Wellback", "title":"Testing", "parent":1},
{"key":3, "name":"Marge Innovera", "title":"Hardware", "parent":2, "arrow": 2},
{"key":4, "name":"Evan Elpus", "title":"Quality", "parent":2},
{"key":5, "name":"Lotta B. Essen", "title":"Sales Rep", "parent":2}
];
myDiagram.model = new go.TreeModel(nodeDataArray);
myDiagram.addDiagramListener("InitialLayoutCompleted", function(e) {
var diagram = e.diagram;
diagram.links.each(function(link) {
var arrow = link.findObject("ARROW");
if (arrow !== null) {
var fromNode = link.fromNode;
var toNode = link.toNode;
if (fromNode.data.arrow === toNode.data.key) {
arrow.visible = true;
} else {
arrow.visible = false;
}
}
});
});
</script>
</body>
</html>
```
在节点数据中,我们添加了一个arrow属性,用于指定箭头的目标节点。在渲染树形布局时,我们通过添加一个名为VERTICAL的面板,在选中节点时显示出key和title属性,并且添加了一个名为ARROW的形状,用于绘制箭头。在InitialLayoutCompleted事件中,我们遍历所有的链接,根据箭头属性值显示或隐藏ARROW形状。
阅读全文