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

手把手教echarts中gexf关系图的构造和使用_第1张图片

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,
                links: graph.links,
                categories: categories,
                roam: true,
                //focus在节点时显示邻边
                focusNodeAdjacency: true,
            }
        ]
    };

    myChart.setOption(option);
}, 'xml');

上面例子的gexf文件地址:
https://echarts-www.cdn.bcebos.com/examples/data/asset/data/les-miserables.gexf
以下是一个简略版的:

步骤:
1.设置属性
2.添加节点以及节点属性
3.添加边以及边属性


<gexf xmlns="http://www.gexf.net/1.2draft" version="1.2" xmlns:viz="http://www.gexf.net/1.2draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.gexf.net/1.2draft http://www.gexf.net/1.2draft/gexf.xsd">
  <meta lastmodifieddate="2014-01-30">
    <creator>Gephi 0.8.1creator>
    <description>description>
  meta>
  <graph defaultedgetype="undirected" mode="static">
    <attributes class="node" mode="static">
      <attribute id="modularity_class" title="Modularity Class" type="integer">attribute>
    attributes>
    <nodes>
      <node id="0" label="Myriel">
        <attvalues>
          <attvalue for="modularity_class" value="0">attvalue>
        attvalues>
        <viz:size value="28.685715">viz:size>
        <viz:position x="-266.82776" y="299.6904" z="0.0">viz:position>
        <viz:color r="235" g="81" b="72">viz:color>
      node>
      <node id="1" label="Napoleon">
        <attvalues>
          <attvalue for="modularity_class" value="0">attvalue>
        attvalues>
        <viz:size value="4.0">viz:size>
        <viz:position x="-418.08344" y="446.8853" z="0.0">viz:position>
        <viz:color r="236" g="81" b="72">viz:color>
      node>
    nodes>
    <edges>
      <edge id="0" source="1" target="0" weight="8.0">
        <attvalues>attvalues>
      edge>
    edges>
  graph>
gexf>

以下分析python使用pygexf库生成gexf文件的部分代码

#建立图
from gexf import Gexf
gexf = Gexf("xxx","yyy")
graph = gexf.addGraph("undirected","static","xxx")

#为图设置节点的属性

########注意添加catalogy与需要使用到的属性名一致的force_id
attr_mod_network = graph.addNodeAttribute(force_id='modularity_class',title = 'Modularity Class', type='integer')

##添加节点
def add_nodes(sheet,net):
        node_id = your_id
        temp_name = your_name
		catagory = your_catagory
        ##id, name, network
        tmp_node = graph.addNode(str(node_id), temp_name)
        tmp_node.addAttribute(attr_mod_network, your_catagory)

##添加边
def add_edges(sheet):
    src_id = your_src_id
    dst_id = your_dst_id
    weight = 1
    ##注意:count_index要是唯一的
    graph.addEdge(count_index, src_id, dst_id, weight=weight)

#############以上就是基本的操作了
#######如果要为node添加一些viz的元素,通过xml元素的角度进行下手
'''
        
        
        
'''
from lxml import etree
for gexf_elem in gexf_xml:
    if gexf_elem.tag == 'graph':
        for gexf_nodes_links in gexf_elem:
            if gexf_nodes_links.tag == 'nodes':
                for node in gexf_nodes_links:
                    tmp_id = node.get('id')
                    node_id = tmp_id
                    for attrs in node:
                        for attr in attrs:
                            ##为不同类目设置不同viz
                            if attr.attrib['for'] == "modularity_class":
                                size_value = your_size_value
                                size = etree.SubElement(node, '{%s}size' % gexf.viz)
                                size.set('value', size_value)

                                pos_x = your_x
                                pos_y = your_y
                                pos_z = your_z
                                position = etree.SubElement(node, '{%s}position' % gexf.viz)
                                position.set('x', str(pos_x))
                                position.set('y', str(pos_y))
                                position.set('z', str(pos_z))
	
                                color = etree.SubElement(node, '{%s}color' % gexf.viz)
                                color.set('r', node_rgb[0])
                                color.set('g', node_rgb[1])
                                color.set('b', node_rgb[2])

            elif gexf_nodes_links.tag == 'edges':
                print("--------------dealing with edges viz--------------")
                for edge in gexf_nodes_links:
                    weight = your_weight
                    thickness = etree.SubElement(edge, '{%s}thickness' % gexf.viz)
                    thickness.set('value', weight)

out_file_name = your_out_file_name

output_file=open(out_file_name, "wb")
output_file.write(etree.tostring(gexf_xml, pretty_print=True, encoding='utf-8', xml_declaration=True))

output_file.close()

另外我有点踩坑的一点是:layout: ‘none’,需要为每个节点设置x,y,z!不然显示不出来

你可能感兴趣的:(javascript,echarts)