如何配置间距自动计算

<think>我们正在配置关系图（relation-graph）的布局，特别是关于间距的自动计算。在之前的配置中，我们看到有`levelDistance`属性用于控制层级间距，但它是空字符串，表示自动计算。此外，还有其他属性如节点大小、最大最小宽度高度等也会影响布局。 自动计算间距通常涉及以下几个方面： 1. 节点之间的水平间距（同层级节点间距） 2. 节点之间的垂直间距（不同层级节点间距） 3. 整个图的边距 在relation-graph中，可以通过以下方式实现自动计算： - 不设置具体的间距值（如`levelDistance`留空），让布局算法自动计算。 - 设置节点的大小（宽度和高度）以及节点间的边距，布局算法会根据这些值自动调整。 具体到配置属性： 在`layout`对象中，我们可以设置： `levelDistance`：层级之间的距离（垂直方向）。如果设置为空字符串或undefined，则会自动计算。 `nodeDistance`：同层级节点之间的距离（水平方向）。同样，如果不设置，则自动计算。 另外，全局配置中也有相关属性： `defaultNodeWidth`和`defaultNodeHeight`：节点默认大小，自动计算时会参考。 `defaultExpandHolderPosition`：展开按钮位置，可能影响节点内部布局。 示例配置： ```javascript const options = { layout: { // ...其他布局配置 levelDistance: '', // 自动计算垂直间距 nodeDistance: undefined, // 自动计算水平间距（同层级节点间） }, // 其他全局配置 defaultNodeWidth: 200, defaultNodeHeight: 40, defaultLineShape: 4, // ... 其他配置 }; ``` 自动计算规则： - 垂直间距（levelDistance）：通常根据节点的高度和层级深度自动调整，以确保节点不重叠且层次清晰。 - 水平间距（nodeDistance）：根据同层级节点的数量、节点宽度以及画布宽度自动调整。 如果自动计算的结果不满足需求，可以手动调整： - 设置`levelDistance`为固定值（如100）来固定垂直间距。 - 设置`nodeDistance`为固定值（如50）来固定水平间距。 另外，还可以通过设置`min_per_width`、`max_per_width`等来限制节点的最小最大尺寸，从而间接影响自动计算。 总结：要配置间距自动计算，只需不设置`levelDistance`和`nodeDistance`（或设置为空/undefined），并确保节点大小设置合理即可。 注意：relation-graph的自动计算算法会综合考虑节点大小、画布大小和节点数量，以确定合适的间距。 下面是一个完整的配置示例： ```javascript const graphOptions = { layout: { label: 'Tree', layoutName: 'tree', layoutClassName: 'seeks-layout-center', from: 'left', min_per_width: undefined, // 不限制最小宽度，自动 max_per_width: 300, // 最大宽度300px min_per_height: 40, // 最小高度40px max_per_height: undefined, // 不限制最大高度 levelDistance: '', // 垂直间距自动 nodeDistance: undefined // 水平间距自动 }, // ... 其他配置 }; ``` 这样配置后，关系图会根据实际节点内容和数量自动调整间距。 如果遇到自动计算不符合预期，可以尝试： 1. 调整节点默认大小（defaultNodeWidth, defaultNodeHeight） 2. 调整布局方向（from） 3. 设置最小/最大间距约束（如果有相关属性，但注意relation-graph目前没有直接提供最小间距属性，而是通过节点大小和画布大小间接控制） 另外，relation-graph还提供了`canvasZoom`（画布缩放）和`canvasOffset`（画布偏移）等属性，可以在全局调整视图。 §§相关问题§§ 1. 在relation-graph中，如何手动调整节点间的水平间距？ 2. 当节点数量过多时，自动计算间距会导致重叠，应如何优化？ 3. 如何为不同层级的节点设置不同的垂直间距？ 4. 关系图布局方向（from属性）有哪些可选值，分别代表什么？</think>### 配置 Relation Graph 间距自动计算 在 Relation Graph 中，要实现间距的自动计算，主要通过以下关键配置项实现： ```javascript const graphOptions = { layout: { // 核心自动计算配置 levelDistance: 'auto', // 开启垂直间距自动计算 nodeDistance: 'auto', // 开启水平间距自动计算 // 辅助约束条件 min_per_width: 100, // 节点最小宽度约束 max_per_width: 300, // 节点最大宽度约束 min_per_height: 40, // 节点最小高度约束 max_per_height: 80, // 节点最大高度约束 // 布局参数 layoutName: 'tree', // 布局算法 from: 'top', // 布局方向 }, // 节点默认尺寸（作为自动计算基准） defaultNodeWidth: 200, defaultNodeHeight: 50, // 其他支持配置 allowAutoLayoutIfSupport: true, // 启用自动布局功能 zoomToFit: true, // 自动缩放适配容器 }; ``` #### 关键配置详解： 1. **间距自动计算核心参数**： - `levelDistance: 'auto'`：启用层级间距自动计算（垂直方向） - `nodeDistance: 'auto'`：启用节点间距自动计算（水平方向） 2. **约束条件**（确保自动计算合理范围）： ```javascript min_per_width: 100, // 节点最小宽度（避免过小） max_per_width: 300, // 节点最大宽度（避免过大） min_per_height: 40, // 节点最小高度 max_per_height: 80, // 节点最大高度 ``` 3. **布局算法选择**： - `tree`：树状布局（最适合自动间距计算） - `center`：中心辐射布局 - `force`：力导向布局 4. **辅助功能**： - `allowAutoLayoutIfSupport: true`：启用自动布局引擎 - `zoomToFit: true`：自动缩放适配容器尺寸 #### 完整自动计算示例： ```javascript const graphOptions = { layout: { label: 'Auto Spacing Tree', layoutName: 'tree', layoutClassName: 'auto-layout', from: 'top', min_per_width: 120, max_per_width: 280, min_per_height: 50, max_per_height: 70, levelDistance: 'auto', // 垂直间距自动 nodeDistance: 'auto' // 水平间距自动 }, defaultNodeWidth: 200, defaultNodeHeight: 60, allowAutoLayoutIfSupport: true, zoomToFit: true, // 其他样式配置 defaultNodeShape: 1, defaultLineShape: 4, defaultLineColor: 'rgba(100, 149, 237, 0.8)' }; ``` #### 高级调整技巧： 1. **动态响应容器尺寸**： ```javascript watch(containerSize, (size) => { graphInstance.setOptions({ canvasWidth: size.width, canvasHeight: size.height }); graphInstance.refresh(); }); ``` 2. **不同层级差异化**： ```javascript nodes: [ { id: 'node1', level: 1, autoLayoutOptions: { minDistance: 50, // 该节点最小间距 maxDistance: 150 } } ] ``` 3. **性能优化**： ```javascript layout: { layoutName: 'tree', enableLayoutAnimation: false, // 关闭动画提升性能 maxLayoutIterations: 100 // 限制计算迭代次数 } ```