如何在 cytoscape.js 中显示由 networkx 生成的网络？

Question

如何在 Cytoscape.js 中显示由 networkx 生成的网络？

我试过 JSON 由 networkx 生成的数据，似乎不起作用。所有的边缘都消失了。 JSON 由 networkx 生成如下：

{
"directed":false,
"graph":{

},
"nodes":[
    {
        "id":"P40012"
    },
    {
        "id":"P53963"
    },
    {
        "id":"Q12265"
    },
    {
        "id":"P35728"
    },
    {
        "id":"P53270"
    },
    {
        "id":"P40559"
    },
    {
        "id":"P53066"
    },
    {
        "id":"P52960"
    },
    {
        "id":"P47125"
    },
    {
        "id":"Q04895"
    },
    {
        "id":"P54074"
    },
    {
        "id":"P21672"
    },
    {
        "id":"P53077"
    },
    {
        "id":"P36145"
    },
    {
        "id":"P31109"
    },
    {
        "id":"P35194"
    },
    {
        "id":"Q12447"
    },
    {
        "id":"P43580"
    },
    {
        "id":"Q04659"
    },
    {
        "id":"P53170"
    },
    {
        "id":"Q12377"
    },
    {
        "id":"Q3E742"
    },
    {
        "id":"Q05787"
    },
    {
        "id":"Q06263"
    },
    {
        "id":"P54862"
    },
    {
        "id":"P32802"
    },
    {
        "id":"Q12365"
    },
    {
        "id":"P38264"
    },
    {
        "id":"P32477"
    },
    {
        "id":"P20484"
    },
    {
        "id":"Q04344"
    },
    {
        "id":"Q03825"
    },
    {
        "id":"P06778"
    },
    {
        "id":"P17536"
    },
    {
        "id":"Q07355"
    },
    {
        "id":"Q06630"
    },
    {
        "id":"P29055"
    },
    {
        "id":"Q08208"
    },
    {
        "id":"Q08206"
    },
    {
        "id":"P25719"
    },
    {
        "id":"P38150"
    },
    {
        "id":"Q12504"
    },
    {
        "id":"P53550"
    },
    {
        "id":"P34077"
    },
    {
        "id":"Q04430"
    },
    {
        "id":"P31412"
    },
    {
        "id":"P38959"
    },
    {
        "id":"Q12157"
    },
    {
        "id":"P36016"
    },
    {
        "id":"P53397"
    },
    {
        "id":"P38322"
    },
    {
        "id":"P38323"
    },
    {
        "id":"P33895"
    },
    {
        "id":"Q05979"
    },
    {
        "id":"P47164"
    },
    {
        "id":"Q04502"
    },
    {
        "id":"Q12471"
    },
    {
        "id":"P25646"
    },
    {
        "id":"Q08683"
    },
    {
        "id":"Q03735"
    },
    {
        "id":"P25567"
    },
    {
        "id":"Q05518"
    },
    {
        "id":"Q07786"
    },
    {
        "id":"P29461"
    },
    {
        "id":"Q06338"
    },
    {
        "id":"P37267"
    },
    {
        "id":"P40961"
    },
    {
        "id":"P38331"
    },
    {
        "id":"P53206"
    },
    {
        "id":"P32048"
    },
    {
        "id":"P27614"
    },
    {
        "id":"Q07791"
    },
    {
        "id":"P10964"
    },
    {
        "id":"P21734"
    },
    {
        "id":"Q6B0W0"
    },
    {
        "id":"P36051"
    },
    {
        "id":"P0C0V8"
    },
    {
        "id":"Q03465"
    },
    {
        "id":"O14468"
    },
    {
        "id":"P38634"
    },
    {
        "id":"Q03788"
    },
    {
        "id":"Q12122"
    },
    {
        "id":"P46949"
    },
    {
        "id":"Q03782"
    },
    {
        "id":"P34247"
    },
    {
        "id":"P38358"
    },
    {
        "id":"Q04371"
    },
    {
        "id":"Q03778"
    },
    {
        "id":"P53113"
    },
    {
        "id":"Q08922"
    },
    {
        "id":"Q12115"
    },
    {
        "id":"P35732"
    },
    {
        "id":"P40317"
    },
    {
        "id":"P46970"
    },
    {
        "id":"P38994"
    },
    {
        "id":"Q12297"
    },
    {
        "id":"P23624"
    },
    {
        "id":"P26364"
    },
    {
        "id":"P0CX10"
    },
    {
        "id":"P15646"
    }
],
"links":[
    {
        "source":11,
        "target":48
    },
    {
        "source":11,
        "target":36
    },
    {
        "source":15,
        "target":99
    },
    {
        "source":18,
        "target":46
    },
    {
        "source":20,
        "target":51
    },
    {
        "source":20,
        "target":77
    },
    {
        "source":24,
        "target":27
    },
    {
        "source":25,
        "target":85
    },
    {
        "source":27,
        "target":75
    },
    {
        "source":27,
        "target":85
    },
    {
        "source":29,
        "target":99
    },
    {
        "source":29,
        "target":37
    },
    {
        "source":33,
        "target":60
    },
    {
        "source":35,
        "target":60
    },
    {
        "source":37,
        "target":63
    },
    {
        "source":42,
        "target":91
    },
    {
        "source":47,
        "target":58
    },
    {
        "source":48,
        "target":54
    },
    {
        "source":52,
        "target":83
    },
    {
        "source":57,
        "target":91
    },
    {
        "source":60,
        "target":91
    },
    {
        "source":60,
        "target":99
    },
    {
        "source":72,
        "target":99
    }
],
"multigraph":false
}

在 Cytoscape.js 中还有其他方法可以显示由 networkx 生成的网络吗？我知道 networkx 可以导出到 GEXF、GML、JSON。那么如何在 Cytoscape.js 中显示它？

Answer 1

Library to import gml

边缘（不是链接），需要 cytoscape 中的 id。一般来说，它应该是这样的。

{
  data: {
    id: 'something',
    source: 'source id'
    target: 'target id'
  }
}

从 networkx 输入解析这应该相当简单。

documentation for cytoscape's format

Answer 2

我通过手动将 networkx 节点和边转换为 Cytoscape.js 接受的 JSON 格式解决了这个问题。

代码如下：

# this function is used to convert networkx to Cytoscape.js JSON format
# returns string of JSON
def convert2cytoscapeJSON(G):
    # load all nodes into nodes array
    final = {}
    final["nodes"] = []
    final["edges"] = [] 
    for node in G.nodes():
        nx = {}
        nx["data"] = {}
        nx["data"]["id"] = node
        nx["data"]["label"] = node
        final["nodes"].append(nx.copy())
    #load all edges to edges array
    for edge in G.edges():
        nx = {}
        nx["data"]={}
        nx["data"]["id"]=edge[0]+edge[1]
        nx["data"]["source"]=edge[0]
        nx["data"]["target"]=edge[1]
        final["edges"].append(nx)
    return json.dumps(final)

给定一个 networkx 图 G，此函数将 return 直接 JSON 字符串。

如何在 cytoscape.js 中显示由 networkx 生成的网络？

How to show a network generated by networkx in cytoscape.js?

python

python-2.7

networkx

cytoscape.js

cytoscape-web