cytoscape_neo4j目录用来放后台Python代码（整个项目就一个python文件，app.py）。static目录用来放网站的静态文件，如javascript/css文件。templates目录用来存放网页（整个项目只有一个网页，index.html）。index.html是我们唯一的网页。cytoscape.min.js是cytoscape必须的Javascript库。AJAX当然少不了jquery-1.11.2.min.js。code.js是我们的前台程序，它调用cytoscape.min.js在前台生成网络关系图。style.css是我们自定义的样式表，cytoscape.min.js会读它来初始化网络关系图的样式（比如：画布的宽度，高度），jquery.qtip.css、query.qtip.js和cytoscape-qtip.js是jquery的提示插件，用于鼠标点击下的消息提醒。app.py前面见过了，是Flask应用程序。你可以在JQuery的官网http://jquery.com/download/下载jquery-1.11.2.min.js。cytoscape的官网http://js.cytoscape.org/可以下载cytoscape.js-2.4.0.zip，解压后我们只需要cytoscape.min.js就好。

4. 开发过程

开发过程主要完成后端图数据在neo4j中的存储，flask简单网站搭建，前端则通过jquery编程调用cytoscape包实现网络关系图的可视化。源代码可以在我的github上找到，详见网址https://github.com/Xzhazha/neo4j-web/tree/master/neo4j-web。

（1）flask开发

Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI 工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 ，Flask使用 BSD 授权。相比Django，其框架差别主要表现为：

Django功能大而全，Flask只包含基本的配置 Django的一站式解决的思路，能让开发者不用在开发之前就在选择应用的基础设施上花费大量时间。Django有模板，表单，路由，认证，基本的数据库管理等等内建功能。与之相反，Flask只是一个内核，默认依赖于两个外部库： Jinja2 模板引擎和 Werkzeug WSGI 工具集，其他很多功能都是以扩展的形式进行嵌入使用。
Flask 比 Django 更灵活用Flask来构建应用之前，选择组件的时候会给开发者带来更多的灵活性，可能有的应用场景不适合使用一个标准的ORM(Object-Relational Mapping 对象关联映射)，或者需要与不同的工作流和模板系统交互。
Flask 在 Django 之后发布，现阶段有大量的插件和扩展满足不同需要 Django发布于2005年，Flask创始于2010年年中，2018年，Flask在 GtiHub 有 32200 个 star，而 Django 是 30800 个 star。

1）创建文件夹

在工程名下创建所需文件夹


/flaskr
    /static
    /templates

flaskr 文件夹不是一个 Python 包，只是个我们放置文件的地方。在接下来的步骤中，我们会直接把数据库模式和主模块放在这个目录中。用户可以通过 HTTP 访问 static 文件夹中的文件，也即存放 css 和 javascript 文件的地方。Flask 会在 templates 文件夹里寻找 Jinja2 模板。详细教程可访问http://docs.jinkan.org/docs/flask/templating.html

2）flask简单网站

Flask简单易学，下面是Flask版的hello world(hello.py):


from flask import Flask
 
app = Flask(__name__)
@app.route("/")
def hello():    
    return "Hello World!"
 
if __name__ == "__main__":
    app.run()

在http://localhost:5000/会显示Hello world！

3）本项目主程序

主要完成连接neo4j图数据库，构造网站动态图数据，以及配置网站的样式。


# coding=utf-8
from flask import Flask, jsonify, render_template
from neo4j.v1 import GraphDatabase
 
driver = GraphDatabase.driver("bolt://localhost:7687", auth=("neo4j", "admin")) #认证连接数据库
 
 
 
app = Flask(__name__) #flask框架必备
 
def buildNodes(nodeRecord): #构建web显示节点
    data = {"id": nodeRecord._id, "label": list(nodeRecord._labels)[0]} #将集合元素变为list，然后取出值
    data.update(dict(nodeRecord._properties))
 
    return {"data": data}
 
 
def buildEdges(relationRecord): #构建web显示边
    data = {"source": relationRecord.start_node._id,
            "target":relationRecord.end_node._id,
            "relationship": relationRecord.type}
 
    return {"data": data}
 
 
@app.route('/')#建立路由，指向网页
def index():
    return render_template('index.html')
 
@app.route('/graph')#两个路由指向同一个网页，返回图的节点和边的结构体
def get_graph():
    # nodes = list(map(buildNodes, graph.run('MATCH (n) RETURN n').data()))
    #
    # edges = list(map(buildEdges, graph.run('MATCH ()-[r]->() RETURN r').data()))
    # elements = {"nodes": nodes, "edges": edges}
 
    with driver.session() as session:
        results=session.run('MATCH (p1{name:"Laurence Fishburne"})-[r1:ACTED_IN]->(m)<-[r2:DIRECTED]-(p2)  RETURN p1,m,p2,r1,r2').values()
        nodeList=[]
        edgeList=[]
        for result in results:
            nodeList.append(result[0])
            nodeList.append(result[1])
            nodeList.append(result[2])
            nodeList=list(set(nodeList))
            edgeList.append(result[3])
            edgeList.append(result[4])
 
        nodes = list(map(buildNodes, nodeList))
        edges= list(map(buildEdges,edgeList))
    return jsonify(elements = {"nodes": nodes, "edges": edges})
 
if __name__ == '__main__':
    app.run(debug = True) #flask框架必备

（2）cytoscape开发

Cytoscape是一款图形化显示网络并进行分析和编辑的软件，它支持多种网络描述格式，也可以用以Tab制表符分隔的文本文档或Microsoft Excel文件作为输入，或者利用软件本身的编辑器模块直接构建网络。cytoscape.js是图论中可视化和分析的工具包，参考http://js.cytoscape.org/和https://github.com/cytoscape，网站具有大量的模板供参考，并且教程特别详细。有一个博客也值得推荐https://blog.csdn.net/cuishizun/article/details/82710493，介绍了图形化关系的一些属性添加。

1）index.html，源码见https://github.com/Xzhazha/neo4j-web/blob/master/neo4j-web/templates/index.html


<!DOCTYPE html>
<html>
<head>
    <title>学习Cytoscape.js和neo4j</title>
    <link href="/static/css/style.css" rel="stylesheet" />
    <script src="/static/js/jquery-1.11.2.min.js"></script>
    <script src="/static/js/cytoscape.min.js"></script>
	<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">	
	<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
	<script src="/static/js/cytoscape-qtip.js"></script>
</head>
<body>
  <h1>Movie网络图</h1>
  <div id="cy"></div> 
  <script src="/static/js/code.js"></script>
</body>
</html>

2）code.js，源码见https://github.com/Xzhazha/neo4j-web/blob/master/neo4j-web/static/js/code.js


$(function(){
  $.get('/graph', function(result) {    
 
	//将cytoscape样式定义为变量cy
    var cy =window.cy = cytoscape({
      container: document.getElementById('cy'),	  // 定义需要渲染的容器
      /*style: style,*/
	  style:cytoscape.stylesheet()
      .selector('node[label = "Person"]').css({'background-color': '#6FB1FC','content': 'data(name)'}) //节点样式
      .selector('node[label = "Movie"]').css({'background-color': '#F5A45D','content': 'data(title)'})
	  .selector('edge').css({'curve-style': 'bezier','target-arrow-shape': 'triangle','line-color': '#ffaaaa','target-arrow-color': '#ffaaaa','content': 'data(relationship)'}) //边线样式
      .selector(':selected').css({'background-color': 'black','line-color': 'black','target-arrow-color': 'black','source-arrow-color': 'black','opacity': 1}) //点击后节点与边的样式
      .selector('.faded').css({'opacity': 0.25,'text-opacity': 0}),
      layout: { name: 'cose', fit: true },  //画布自适应大小
      elements: result.elements
	});
	
		
	cy.elements().qtip({ //点击elements处的提醒
		content: //function(){ return 'Example qTip on ele ' + this.id() },
			{text:'asdf',
			title:function(){ return 'Example qTip on ele ' + this.id() }},
		position: {
			my: 'top center',
			at: 'bottom center'
		},
		style: {
			classes: 'qtip-bootstrap',
			tip: {
				width: 16,
				height: 8
			}
		}
	});
 
			// call on core,点击空白处的提醒
	cy.qtip({
		content: 'Example qTip on core bg',
		position: {
			my: 'top center',
			at: 'bottom center'
		},
		show: {
			cyBgOnly: true
		},
		style: {
			classes: 'qtip-bootstrap',
			tip: {
				width: 16,
				height: 8
			}
		}
	}); 
    
	  
}, 'json');
});

5. 效果图

（1）启动网站

依次启动neo4j，app.py,楼兰器中输入网址http://127.0.0.1:5000/

（2）效果预览

1）后端app.py启动

2）前端普通预览

因为目前app.py中传递的数据为

results=session.run('MATCH (p1{name:"Laurence Fishburne"})-[r1:ACTED_IN]->(m)<-[r2:DIRECTED]-(p2)  RETURN p1,m,p2,r1,r2').values()

，返回的是Laurence Fishburne表演的电影和该电影的导演之间的关系，如图

3）前端特效

点击顶点与边后，选中的element会变为黑色，并且有提醒，如图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/164879