基于gradio+networkx库对图结构进行可视化展示

前言

在gradio框架下对蛋白质-蛋白质相互作用网络（PPI网络）进行可视化，并将其在网页前端进行展示。

方法

其实很简单

可以直接使用networkx画图后保存图片，然后使用Gradio框架的image组件进行展示即可。

但实际上gradio还配置了Plot组件，可以用于将matplotlib的figure进行展示

又由于networkx绘图本身又基于matplotlib，所以也可以完成展示。

接下来主要麻烦的地方就是networkx绘图的使用

networkx的设计模式是分离的，图结构的存储和绘制是分开的两个步骤

绘制的时候，需要传入点的坐标，这些坐标有一套成体系的算法，也就是layout算法。

首先绘制点，传入图G，传入layout算法的输出结果pos，然后可以自己设定节点颜色

边也是同理，由于边也是基于点计算的，所以传入点的pos和图的结构G就可以得知边应该怎么绘制，同样线条粗细、样式、颜色、alpha通道也都是可以调整的。

最后是标注label和图例legend绘制，字体、大小也都是可以调整的。

代码：

import random
import networkx as nx
from matplotlib import pyplot as plt
import gradio as grdef get_ppi_figure(xxx):# 假设这是查询PPI网络后的结果图GG = nx.Graph()G.add_edge('1','2',is_infer=True,weight=0.1)G.add_edge('2','1',is_infer=True,weight=0.3)G.add_edge('2','1',is_infer=True,weight=0.3)G.add_edge('2','1',is_infer=True,weight=0.3)G.add_edge('3','4',is_infer=True,weight=0.5)G.add_edge('4','5',is_infer=True,weight=0.7)G.add_edge('a','b',is_infer=False,weight=1.0)#设置查询中心点的颜色nodes = []node_color = []for u in G.nodes():nodes.append(u)if u == 'a':node_color.append("#FFFF00")else:node_color.append('r')#读取边的推理权重edge_is=[]infer_weight=[]edge_not=[]for u,v,d in G.edges(data=True):if d['is_infer']:edge_is.append((u,v))infer_weight.append(d['weight'])else:edge_not.append((u,v))fig =plt.figure()fig.add_subplot()pos = nx.spring_layout(G)# 在node_color传入颜色的list，即可实现每个点有不同的颜色nx.draw_networkx_nodes(G, pos, nodelist=nodes, node_color=node_color)nx.draw_networkx_edges(G, pos, edgelist=edge_not, edge_color='g', label="From Experiment")# 这里使用透明度alpha来表示推理的置信度nx.draw_networkx_edges(G, pos, edgelist=edge_is, edge_color='r', alpha=infer_weight, style="dashed", label="From Prediction")nx.draw_networkx_labels(G, pos)plt.legend(loc="upper right")plt.axis('off')return figdemo = gr.Interface(get_ppi_figure,gr.Textbox(label='Protein ID'),gr.Plot(label='PPI Graph'))
demo.launch(server_port=7000,share=False,debug=True,show_error=True)