Cytoscape结合Networkx生成有向图
Posted xbw12138
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Cytoscape结合Networkx生成有向图相关的知识，希望对你有一定的参考价值。
需求
搜索水质监测自动站上游及下游的其他自动站，以有向图的形式展示在web端，最终效果图如下
代码
1、使用Python的networkx包进行有向图的构建
2、使用Cytoscape前端js库绘制有向图
安装依赖
pip install networkx==2.5 -i https://pypi.tuna.tsinghua.edu.cn/simple
后端代码
import json
from functools import reduce
import networkx as nx
from networkx.readwrite import json_graph
def list_dict_duplicate_removal(data_list):
return reduce(lambda x, y: x if y in x else x + [y], [[], ] + data_list)
class Graph(object):
def __init__(self, node=147):
self.dict_node = 96: "剔除敏感数据", 97: "剔除敏感数据", 98: "剔除敏感数据", 99: "剔除敏感数据", 100: "剔除敏感数据", 102: "剔除敏感数据",
103: "剔除敏感数据", 104: "剔除敏感数据", 105: "剔除敏感数据", 106: "剔除敏感数据", 107: "剔除敏感数据",
108: "剔除敏感数据", 109: "剔除敏感数据", 110: "剔除敏感数据", 111: "剔除敏感数据", 112: "剔除敏感数据", 113: "剔除敏感数据",
114: "剔除敏感数据", 115: "剔除敏感数据", 116: "剔除敏感数据", 117: "剔除敏感数据", 118: "剔除敏感数据", 119: "剔除敏感数据",
120: "剔除敏感数据", 121: "剔除敏感数据", 122: "剔除敏感数据", 123: "剔除敏感数据", 124: "剔除敏感数据", 125: "剔除敏感数据",
126: "剔除敏感数据", 127: "剔除敏感数据", 128: "剔除敏感数据", 129: "剔除敏感数据", 130: "剔除敏感数据", 131: "剔除敏感数据",
132: "剔除敏感数据", 133: "剔除敏感数据", 134: "剔除敏感数据", 135: "剔除敏感数据", 136: "剔除敏感数据", 137: "剔除敏感数据", 143: "剔除敏感数据",
144: "剔除敏感数据", 145: "剔除敏感数据", 146: "剔除敏感数据", 147: "剔除敏感数据", 148: "剔除敏感数据", 149: "剔除敏感数据", 150: "剔除敏感数据",
151: "剔除敏感数据", 152: "剔除敏感数据", 153: "剔除敏感数据", 154: "剔除敏感数据", 155: "剔除敏感数据", 156: "剔除敏感数据", 157: "剔除敏感数据",
158: "剔除敏感数据", 159: "剔除敏感数据", 160: "剔除敏感数据", 161: "剔除敏感数据", 162: "剔除敏感数据", 163: "剔除敏感数据",
164: "剔除敏感数据", 165: "剔除敏感数据", 166: "剔除敏感数据", 167: "剔除敏感数据", 168: "剔除敏感数据", 169: "剔除敏感数据", 170: "剔除敏感数据",
171: "剔除敏感数据", 172: "剔除敏感数据", 173: "剔除敏感数据", 175: "剔除敏感数据", 176: "剔除敏感数据", 177: "剔除敏感数据",
178: "剔除敏感数据", 179: "剔除敏感数据", 180: "剔除敏感数据", 181: "剔除敏感数据", 183: "剔除敏感数据", 184: "剔除敏感数据"
self.relationship = [
(131, 132), (132, 133), (132, 134), (134, 147), (147, 180), (180, 179), (179, 170), (179, 123),
(179, 128), (179, 169), (170, 124), (123, 124), (124, 184), (184, 168), (128, 126), (169, 126),
(126, 127), (143, 144), (144, 145), (145, 146), (146, 147), (99, 152), (152, 151), (153, 150),
(150, 149), (149, 151), (151, 118), (151, 117), (118, 116), (117, 115), (116, 112), (115, 112),
(112, 119), (119, 125), (171, 115), (178, 171), (108, 178), (100, 108), (155, 100), (156, 155),
(155, 154), (119, 122), (108, 148), (108, 104), (104, 107), (108, 111), (111, 103), (97, 98),
(98, 96), (96, 176), (176, 114), (114, 113), (113, 130), (130, 129), (98, 158), (102, 109),
(109, 110), (110, 103), (102, 105), (105, 106), (106, 173), (173, 183), (183, 121), (121, 136),
(136, 122), (173, 172), (172, 177), (177, 175), (175, 120), (165, 163), (163, 160), (160, 161),
(161, 157), (157, 135), (157, 137), (162, 167), (167, 159), (181, 164), (164, 157), (125, 126),
(166, 167), (155, 98), (159, 163)
]
self.start_node = [131, 143, 99, 153, 156, 97, 102, 165, 162, 166, 181] # 上游
self.node = node
def search(self):
G = nx.DiGraph() # 创建空的简单有向图
G.add_nodes_from(list(self.dict_node.keys()))
G.add_edges_from(self.relationship)
nodes, edges = [], []
for node in self.start_node: # 遍历入河自动站
river = nx.dfs_successors(G, node) # 从上到下查找自动站
if self.node in river: # 判断要查找得自动站是否在该河流上
GG = nx.Graph(river)
for n in GG:
GG.nodes[n]["name"] = self.dict_node[n]
item_dict = json_graph.cytoscape_data(GG)
nodes.extend(item_dict['elements']['nodes'])
edges.extend(item_dict['elements']['edges'])
return 'elements': 'nodes': list_dict_duplicate_removal(nodes), 'edges': list_dict_duplicate_removal(edges)
if __name__ == "main":
print(json.dumps(Graph(147).search()))
前端
忘了从哪里扒的代码了，稍作修改了一下，使用ajax同步获取后端的接口数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#cy
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div id="cy"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/cytoscape/3.16.3/cytoscape.min.js"></script>
<script>
var waterName = "剔除敏感数据";
$.ajax(
cache: false,
type: "GET",
url: "http://127.0.0.1:6070/water/water_prediction/nearby_unit",
dataType: 'json',
data:
"waterName": waterName
,
async: false,
success: function (data)
if (data.code == 1)
// 此处请求回来的数据其中 elements 字段为， 该数据通过python networkx包json_graph.cytoscape_data生成的图json数据
// "edges":["data":"source":102,"target":109,"data":"source":102,"target":105,"data":"source":109,"target":110,"data":"source":110,"target":103,"data":"source":105,"target":106,"data":"source":106,"target":173,"data":"source":173,"target":183,"data":"source":173,"target":172,"data":"source":183,"target":121,"data":"source":121,"target":136,"data":"source":136,"target":122,"data":"source":172,"target":177,"data":"source":177,"target":175,"data":"source":175,"target":120],"nodes":["data":"id":"102","name":"\\u00\\u67\\u6c34\\u93","value":102,"data":"id":"109","name":"\\05\\cb3\\uf8","value":109,"data":"id":"110","name":"\\ub1\\u58def","value":110,"data":"id":"105","name":"\\u6c99\\9d","value":105,"data":"id":"106","name":"\\u0\\ub\\u\\u6","value":106,"data":"id":"173","name":"\\u4\\u61","value":173,"data":"id":"183","name":"\\u5927\\u59","value":183,"data":"id":"121","name":"\\u59","value":121,"data":"id":"136","name":"\\u4e3","value":136,"data":"id":"172","name":"\\u73","value":172,"data":"id":"177","name":"\\u01\\90f\\u89\\u5c\\u8","value":177,"data":"id":"175","name":"\\u6\\u25\\u6c\\634\\u9","value":175,"data":"id":"103","name":"\\u93\\u7c\\596\\27\\7","value":103,"data":"id":"122","name":"\\u7\\u3\\u7\\uf8","value":122,"data":"id":"120","name":"\\u5\\u98\\u7c","value":120]
elements = data.resData.elements;
else if (data.code == 0)
alert(data.msg);
,
error: function ()
elements = "edges":["data":"source":102,"target":109,"data":"source":102,"target":105,"data":"source":109,"target":110,"data":"source":110,"target":103,"data":"source":105,"target":106,"data":"source":106,"target":173,"data":"source":173,"target":183,"data":"source":173,"target":172,"data":"source":183,"target":121,"data":"source":121,"target":136,"data":"source":136,"target":122,"data":"source":172,"target":177,"data":"source":177,"target":175,"data":"source":175,"target&以上是关于Cytoscape结合Networkx生成有向图的主要内容，如果未能解决你的问题，请参考以下文章
python 使用networkx绘制带权无向图和带权有向图，以及标注特定路径