布局器基础概念
布局器（layout engine）的核心职责是为节点分配坐标（x、y），让图结构更易读。
1. 布局本质在做什么
运行时布局主要包括：
- 根据关系计算节点位置
- 控制层级、方向、间距与可读性
- 在坐标确定后配合居中/缩放完成视图落点
2. 两种主要使用方式
A. 通过 RGOptions.layout 声明默认布局
可与以下流程配合：
graphInstance.setJsonData(...)graphInstance.doLayout()initialData初始化流程
const graphOptions = {
layout: {
layoutName: 'tree',
from: 'left',
treeNodeGapH: 150,
treeNodeGapV: 10
}
};
B. 通过 createLayout(...) 显式创建布局器
适合对指定子图做定向布局：
const layouter = graphInstance.createLayout({
layoutName: 'tree',
from: 'left',
treeNodeGapH: 150,
treeNodeGapV: 10
});
layouter.placeNodes(networkNodes, rootNode);
3. 常见手动布局流程
graphInstance.addNodes(nodes);
graphInstance.addLines(lines);
setTimeout(() => {
const layouter = graphInstance.createLayout({ layoutName: 'tree', from: 'left' });
const root = graphInstance.getNodeById('root');
const networkNodes = graphInstance.getNetworkNodesByNode(root);
layouter.placeNodes(networkNodes, root);
graphInstance.moveToCenter();
graphInstance.zoomToFit();
}, 300);
这个延时通常用于等待节点真实尺寸测量完成。
4. 核心布局 API
createLayout(layoutOptions)doLayout()setJsonData(jsonData)startAutoLayout()/stopAutoLayout()（力导向自动布局场景）moveToCenter()zoomToFit()
5. 如何选策略
- 初次整图快速展示：
setJsonData + RGOptions.layout - 动态编辑器精细控制：
add/update + createLayout - 手动坐标模式/绘图板：
layoutName: 'fixed'或禁用自动重排
6. 关键注意事项
- 布局本质上是分配节点坐标，线条会跟随节点几何关系更新。
- 手动
x/y与自动布局不应在同一阶段互相覆盖。 - 大图场景要关注布局算法与迭代参数的性能成本。