要使用 GoJS 实现
Tree 结构，可以按照以下步骤进行：
1. 引入 GoJS 库和样式文件
```html
<head>
<script src="https://unpkg.com/gojs/release/go.js"></script>
<link rel="stylesheet" href="https://unpkg.com/gojs/release/go.css">
</head>
```
2. 创建一个 div 作为容器
```html
<div id="myDiagramDiv" style="width:100%;height:500px;"></div>
```
3. 创建 GoJS 图表对象
```javascript
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center, // 图表居中显示
"undoManager.isEnabled": true // 启用撤销/重做
});
```
4. 创建
Tree 节点模板
```javascript
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
$(
go.Shape,
"Ellipse", // 节点形状
{
fill: "lightgray", // 节点背景色
stroke: "gray" // 节点边框颜色
}
),
$(
go.TextBlock,
{
margin: 10 // 文本边距
},
new go.Binding("text", "key") // 节点显示的文本
)
);
```
5. 绑定数据
```javascript
// 定义节点数据
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" },
{ key: "Delta" },
{ key: "Epsilon" }
];
// 绑定数据到图表
myDiagram.model = new go.
TreeModel(nodeDataArray);
```
6. 运行代码，查看效果
完整代码如下：
```html
<head>
<script src="https://unpkg.com/gojs/release/go.js"></script>
<link rel="stylesheet" href="https://unpkg.com/gojs/release/go.css">
</head>
<body>
<div id="myDiagramDiv" style="width:100%;height:500px;"></div>
<script>
var $ = go.GraphObject.make;
var myDiagram = $(go.Diagram, "myDiagramDiv", {
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate = $(
go.Node,
"Auto",
$(
go.Shape,
"Ellipse",
{
fill: "lightgray",
stroke: "gray"
}
),
$(
go.TextBlock,
{
margin: 10
},
new go.Binding("text", "key")
)
);
var nodeDataArray = [
{ key: "Alpha" },
{ key: "Beta" },
{ key: "Gamma" },
{ key: "Delta" },
{ key: "Epsilon" }
];
myDiagram.model = new go.
TreeModel(nodeDataArray);
</script>
</body>
```
运行代码，即可看到一个简单的
Tree 结构。你可以根据需求自定义节点模板和节点数据来创建任意复杂的
Tree 结构。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2084
