GoJS Genogram报Cannot read properties of null (reading 'centerX')如何解决

根因说明 #

遇到的两个报错对应两个核心问题：

1. 节点引用的类型不匹配：Genogram的节点key是严格类型匹配的，混用字符串和数字类型的key（比如key为数字2，但m字段填字符串"2"）会导致关联关系匹配失败，出现节点找不到的错误。
2. 节点加载顺序异常：内置的家谱布局计算时要求所有被引用的节点（父母、配偶）的定义必须在引用节点之前，若子节点先于父节点/配偶出现在数据集中，布局计算时会读取到null节点，触发Cannot read properties of null (reading 'centerX')报错。

修复步骤 #

• 第一步：统一所有key的类型，要么全用字符串，要么全用数字，所有m/f/ux/vir字段的取值类型要和对应节点的key类型完全一致。
• 第二步：调整数据集的排序，按照代际从上到下排列，优先级：长辈节点 > 晚辈节点，配偶节点 > 引用该配偶的节点。比如你的数据集中key为17的节点要排在引用它的key为8的节点前面。
• 第三步：如果不想调整数据顺序，可以修改初始化逻辑，等所有节点加载完成后再触发布局：

// 禁用初始自动布局
myDiagram.layout.isInitial = false;
// 监听所有节点加载完成事件后再计算布局
myDiagram.addDiagramListener("ModelChanged", function(e) {
  if (e.change === go.ChangedEvent.Insert && e.modelChange === "nodeDataArray") {
    setTimeout(() => myDiagram.layoutDiagram(true), 0);
  }
});

• 第四步：可选兼容处理，在源码读取centerX属性的位置增加非空判断：

// 将原有的xxx.centerX调用替换为如下逻辑
const targetNode = getTargetNodeFunc();
const centerX = targetNode?.location?.x ?? 0;

按以上步骤修改后即可正常运行。

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