使用gojs-angular如何实现AWS父节点居中且整个图表在DIV内居中

你现在使用的是GoJS的CircularLayout环形布局，只要做3处修改即可实现AWS节点居中、图表整体在DIV内居中的需求：

1. 导入依赖并添加模板引用 #

首先在ts组件头部导入GoJSDiagramComponent，并添加ViewChild获取图表实例：

import {Component, Inject, OnInit, ViewChild} from "@angular/core";
import { GoJSDiagramComponent } from 'gojs-angular';
// 其余原有导入保持不变

在组件类中添加实例引用：

export class GsSngNetworkTopologyComponent implements OnInit {
  @ViewChild('sngNetwork') sngNetworkDiagram: GoJSDiagramComponent;
  // 其余原有属性保持不变
}

2. 修改环形布局配置 #

修改initDiagram方法中CircularLayout的配置，开启中心节点定向布局模式：

layout: $(go.CircularLayout, {
  spacing: 50,
  arrangement: go.CircularLayout.ArrangementCenterDirected // 新增配置，开启中心节点模式
}),

3. 数据加载完成后触发居中逻辑 #

在_processData方法的末尾，所有节点和链接数据组装完成后，添加居中逻辑：

_processData() {
  // 原有数据处理逻辑全部保持不变
  console.log('state :', this.state);

  // 新增居中逻辑
  setTimeout(() => {
    // 获取GoJS图表实例
    const diagram = this.sngNetworkDiagram?.diagram;
    if (!diagram) return;
    // 根据subjectId查找要居中的AWS节点
    const centerNode = diagram.findNodeForKey(this.subjectId);
    if (!centerNode) return;
    // 给布局指定中心节点，重新触发布局
    diagram.layout.centerNode = centerNode;
    diagram.layout.invalidateLayout();
    // 将整个图表对齐到DIV可视区域中心，可选添加zoomToFit自适应缩放
    diagram.centerRect(centerNode.actualBounds);
    // diagram.zoomToFit(); // 取消注释可让图表自适应DIV大小
  }, 0)
}

效果说明 #

修改后AWS节点会固定在环形布局的中心位置，其余关联节点环绕排列，同时整个图表会自动对齐到外层DIV的中心位置，不需要额外修改CSS。

内容的提问来源于stack exchange，提问作者Malindu Dilshan