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

Question

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

我尝试了由networkx生成的JSON数据，但似乎并没有起作用。所有的边缘都消失了。 以下是由networkx生成的JSON：

{
"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中显示它呢？

- hcnak

---

在我看来，边缘已经存在了。 "链接"中有很多数据。那不就是边缘吗？ - Joel

看起来是这样的：http://imgur.com/gallery/yKvlu，只有由节点组成的一个圆形，但没有边缘。 - hcnak

Answer 1

我已经通过手动将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，此函数将直接返回JSON字符串。

- hcnak

---

你好，感谢您的有用回答。我想知道当我们有许多边和节点时，迭代这两者会变得相当缓慢。 - Tommaso Guerrini

你可以尝试使用内置函数如map()来加速迭代：https://docs.python.org/3/library/functions.html#map - hcnak

Answer 2

导入gml的库

---

在cytoscape中，边缘（而不是链接）需要有id。通常应该像这样。

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

这应该很容易从networkx输入中解析出来。

Cytoscape格式的文档

- Tom Aerts

---

你说得对，我通过添加一个转换函数来将networkx的数据转换成Cytoscape.js所接受的JSON格式，从而解决了这个问题。谢谢。 - hcnak