如何使用graphology和SigmaJS解析GEXF文件/字符串中的多重图？

问题根源 #

你遇到的invalid Graph constructor错误，核心原因是处理带多重边的GEXF文件，必须使用Graphology专门的MultiGraph类型，而非普通Graph加multi: true配置。普通Graph即便开启multi选项，其内部结构也和GEXF解析器期望的MultiGraph不匹配，导致解析失败。

修正后的代码 #

import { useEffect } from "react";
// 替换为导入MultiGraph类型
import MultiGraph from "graphology/multi";
import { SigmaContainer, useLoadGraph } from "@react-sigma/core";
import { parse } from 'graphology-gexf';

const LoadGraph = () => {
  const loadGraph = useLoadGraph();

  useEffect(() => {
    // 创建MultiGraph实例（默认支持多重边，无需额外配置）
    const graph = new MultiGraph();
    // 替换为你的完整GEXF字符串内容
    parse(`<?xml version="1.0" encoding="UTF-8"?>
<!-- 此处放入包含节点、多重边的完整GEXF结构 -->`, graph);

    loadGraph(graph);
  }, [loadGraph]);

  return null;
};

关键改动说明 #

• 替换Graph为MultiGraph：MultiGraph是Graphology为多重边场景量身设计的图形类型，完全兼容GEXF的多重边解析规则。
• 移除multi: true配置：MultiGraph本身就支持同节点间的多条边，不需要额外开启配置。
• 补全GEXF内容：你的代码里仅传入了XML声明，需要替换为包含节点、边（含多重边定义）的完整GEXF结构才能正常解析。

额外提示 #

如果GEXF中的边带有id属性，解析器会自动用该ID区分同节点间的不同边；如果没有设置id，MultiGraph会自动生成唯一标识，避免多重边冲突。

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