手把手教echarts中gexf关系图的构造和使用

最新推荐文章于 2022-08-01 13:33:41 发布

努力复盘成长的如言

最新推荐文章于 2022-08-01 13:33:41 发布

阅读量2.4k

点赞数 3

文章标签： javascript echarts

本文链接：https://blog.csdn.net/weixin_43856199/article/details/107904694

版权

本文详细介绍了如何使用JavaScript库Echarts结合GEXF文件构造和展示关系图。通过设置属性、添加节点和边以及利用Python的pygexf库生成GEXF文件，解释了构建过程中的关键步骤。特别提醒，若设置layout为'none'，务必为每个节点指定x, y, z坐标，以确保图形正确显示。" 108293834,1477485,理解GRASP原则：受保护变量原则,"['设计模式', 'C#', '.NET']

摘要由CSDN通过智能技术生成

源代码参见：https://echarts.apache.org/examples/zh/editor.html?c=graph

myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/les-miserables.gexf', function (xml) {
   
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    
    //设置节点的类别名称，出现在后面legend部分
    var categories = [];
    for (var i = 0; i < 9; i++) {
   
        categories[i] = {
   
            name: '类目' + i
        };
    }
    
    //设置需要展示的graph的nodes基本属性，后面需要用于序列的data里
    graph.nodes.forEach(function (node) {
   
        node.itemStyle = null;
        node.value = node.symbolSize;
        node.symbolSize /= 1.5;
        node.label = {
   
            show: node.symbolSize > 30//节点size>30时显示node的label
        };
		//这里的类别与gexf中的属性id为modularity_class相对应
        node.category = node.attributes.modularity_class;
    });
    
    option = {
   
        title: {
   
            text: 'Les Miserables',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {
   },
        legend: [{
   
            // selectedMode: 'single',
            data: categories.map(function (a) {
   
                return a.name;
            })
        }],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
   	//修改图的名字
                name: 'Les Miserables',
                type: 'graph',
                layout: 'none',
                data: graph.nodes