如何将JSON文件转换为GEXF文件适配ECharts环形布局？

嘿，我之前也遇到过这个需求——想用ECharts的环形布局图，但手里只有JSON数据，不想绕GEXF的弯。给你两个实用方案，纯JavaScript就能搞定：

方案1：跳过GEXF转换，直接喂JSON给ECharts #

其实ECharts的graph系列根本不需要非得读GEXF文件！原来的示例里用echarts.dataTool.gexf.parse(xml)，本质是把GEXF的XML解析成了包含nodes和links的JavaScript对象。那我们直接把自己的JSON数据转换成这个结构就行，省掉中间步骤。

比如你可以把原来的代码改成这样：

myChart.showLoading();
// 替换成你的JSON文件路径
$.get('your-json-data.json', function (jsonData) {
    myChart.hideLoading();
    
    // 按照ECharts需要的格式处理节点（和原来示例的逻辑一致）
    jsonData.nodes.forEach(function (node) {
        node.itemStyle = null;
        // 这里根据你的JSON字段调整，比如如果你的节点大小存在size字段，就替换成node.size
        node.value = node.symbolSize || 20;
        node.symbolSize = (node.symbolSize || 20) / 1.5;
        node.label = {
            normal: {
                show: node.symbolSize > 10
            }
        };
        // 替换成你JSON里的分类字段，比如node.categoryId
        node.category = node.attributes?.modularity_class || 0;
    });

    // 剩下的配置和原来几乎一样，只需要替换数据来源
    const categories = [];
    for (let i = 0; i < 9; i++) {
        categories[i] = {
            name: '类目' + i
        };
    }

    const option = {
        title: {
            text: '你的图表标题',
            subtext: 'Circular layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            data: categories.map(a => a.name)
        }],
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
            name: '你的数据集名称',
            type: 'graph',
            layout: 'circular',
            circular: {
                rotateLabel: true
            },
            data: jsonData.nodes,
            links: jsonData.links,
            categories: categories,
            roam: true,
            label: {
                position: 'right',
                formatter: '{b}'
            },
            lineStyle: {
                color: 'source',
                curveness: 0.3
            }
        }]
    };
    myChart.setOption(option);
}, 'json');

方案2：真·把JSON转成GEXF文件（如果需要导出或兼容其他工具） #

如果你确实需要生成GEXF格式的文件（比如要导出给其他图可视化工具用），可以写一个简单的JS函数来转换。GEXF是XML格式，核心结构就是nodes和edges（对应你的JSON里的links）。

这里给你一个基础的转换函数，你可以根据自己的JSON字段调整：

// 假设你的JSON结构是 {nodes: [{id: '', name: '', ...}], links: [{source: '', target: '', ...}]}
function convertJsonToGexf(jsonData) {
    // 初始化GEXF的XML头部
    let gexfContent = `<?xml version="1.0" encoding="UTF-8"?>
<gexf xmlns="http://www.gexf.net/1.2draft" version="1.2">
    <graph mode="static" defaultedgetype="undirected">
        <nodes>`;

    // 遍历节点，生成<node>标签
    jsonData.nodes.forEach(node => {
        gexfContent += `\n            <node id="${node.id}" label="${node.name}"/>`;
        // 如果你的节点有属性（比如分类），可以加上属性节点
        if (node.attributes?.modularity_class !== undefined) {
            gexfContent += `
                <attvalues>
                    <attvalue for="modularity_class" value="${node.attributes.modularity_class}"/>
                </attvalues>`;
        }
    });

    gexfContent += `\n        </nodes>
        <edges>`;

    // 遍历链接，生成<edge>标签
    jsonData.links.forEach((link, idx) => {
        gexfContent += `\n            <edge id="e${idx}" source="${link.source}" target="${link.target}"/>`;
    });

    // 闭合XML标签
    gexfContent += `\n        </edges>
    </graph>
</gexf>`;

    return gexfContent;
}

// 使用方式：获取JSON后转成GEXF并下载
$.get('your-json-data.json', function (jsonData) {
    const gexfXml = convertJsonToGexf(jsonData);
    // 创建Blob并触发下载
    const blob = new Blob([gexfXml], { type: 'application/xml' });
    const downloadUrl = URL.createObjectURL(blob);
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.download = 'converted-data.gexf';
    aTag.click();
    URL.revokeObjectURL(downloadUrl);
});

小提示 #

如果你的JSON字段和示例里的不一样（比如节点大小叫size而不是symbolSize，分类字段叫group而不是modularity_class），记得修改代码里对应的字段名就行，灵活调整~

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