go.js能生成含中间变量的平面树形结构吗
时间: 2023-09-30 10:12:22 浏览: 39
是的,GoJS 可以生成含有中间变量的平面树形结构。
GoJS 是一个功能强大的 JavaScript 库,用于创建交互式的图表和数据可视化应用程序。GoJS 提供了许多内置的布局算法和图形元素,可以轻松地创建平面树形结构,并支持自定义节点、连线和样式等。
下面是一个示例代码,可以根据你的需求进行修改:
```javascript
// 创建画布
const $ = go.GraphObject.make;
const myDiagram = $(go.Diagram, "myDiagramDiv");
// 定义节点模板
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "white" }),
$(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
);
// 定义中间变量模板
myDiagram.nodeTemplateMap.add("Intermediate",
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
$(go.TextBlock, { margin: 5 }, new go.Binding("text", "name"))
));
// 定义边模板
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape),
$(go.TextBlock, { segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN, 5, 0) }, new go.Binding("text", "value"))
);
// 定义数据
const data = [
{ key: "1", name: "1", isIntermediate: false, parent: "0" },
{ key: "2", name: "2", isIntermediate: false, parent: "1" },
{ key: "3", name: "3", isIntermediate: true, parent: "2" },
{ key: "4", name: "4", isIntermediate: false, parent: "2" },
{ key: "5", name: "5", isIntermediate: false, parent: "1" },
{ key: "6", name: "6", isIntermediate: false, parent: "5" },
{ key: "7", name: "7", isIntermediate: true, parent: "6" },
{ key: "8", name: "8", isIntermediate: false, parent: "6" }
];
// 创建模型
const model = $(go.TreeModel);
model.nodeKeyProperty = "key";
model.nodeDataArray = data;
// 设置布局
const layout = $(go.TreeLayout);
layout.angle = 90;
layout.layerSpacing = 80;
layout.nodeSpacing = 20;
// 绑定模型和布局
myDiagram.model = model;
myDiagram.layout = layout;
```
在这个示例代码中,首先创建一个画布,然后定义节点、边和中间变量的模板。接着定义数据,包括每个节点的名称、是否为中间变量以及父节点的键。然后创建模型,并绑定数据到模型中。最后设置布局,并绑定模型和布局到画布中。
值得注意的是,这个示例代码使用了 GoJS 内置的树形布局算法,可以根据需要进行自定义。同时,如果需要更加复杂的节点和连线样式,也可以进行自定义。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)