gojs go.ForceDirectedLayou 布局 怎么让元素水平排列啊
时间: 2024-02-05 14:11:36 浏览: 47
可以通过调整节点的初始位置来实现水平排列。具体方法如下:
1. 在定义节点时,为每个节点设置一个初始的 x 坐标,使它们在水平方向上排列。例如,可以按照顺序设置初始 x 坐标为 0、100、200、300、...。
2. 在创建布局对象时,设置 `alignment: go.EnumValue.parse(go.Spot, "topLeft")`,这样布局对象会以左上角对齐的方式排列节点,保持节点的水平位置不变。
以下是一个示例代码片段:
```
var $ = go.GraphObject.make;
// 定义节点模板
var nodeTemplate = $(go.Node, "Auto",
$(go.Shape, "Rectangle", { width: 50, height: 50 }),
$(go.TextBlock, { margin: 5 }, new go.Binding("text", "key"))
);
// 创建节点数据
var nodeDataArray = [
{ key: "A", loc: new go.Point(0, 0) },
{ key: "B", loc: new go.Point(100, 0) },
{ key: "C", loc: new go.Point(200, 0) },
{ key: "D", loc: new go.Point(300, 0) }
];
// 创建图表模型
var myModel = $(go.GraphLinksModel, {
nodeDataArray: nodeDataArray
});
// 创建布局对象
var layout = $(go.ForceDirectedLayout, {
alignment: go.EnumValue.parse(go.Spot, "topLeft")
});
// 创建图表对象
var myDiagram = $(go.Diagram, "myDiagramDiv", {
layout: layout,
model: myModel
});
// 添加节点模板
myDiagram.nodeTemplate = nodeTemplate;
// 开始布局
myDiagram.layoutDiagram();
```
在上面的代码中,我们定义了一个包含 4 个节点的图表,每个节点的初始 x 坐标为 0、100、200、300。然后,我们创建了一个 `go.ForceDirectedLayout` 布局对象,并设置 `alignment` 属性为 `go.Spot.TopLeft`,这样节点在布局时会以左上角对齐的方式排列,从而保持水平位置不变。最后,我们将布局应用到图表中,通过调用 `myDiagram.layoutDiagram()` 方法来进行布局。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)