Neo4j前端可视化组件Neovis.js使用说明

一、说明

Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。在单个配置对象中定义基于标签、属性、节点和关系的自定义和着色样式。
在使用的过程中，发现了该库的一个缺点，就是需要将neo4j的地址、用户名、密码写在展示的html文件中，这使得数据不够安全，找了一下，发现并没有很好的解决办法（例如创建只读账号等），如果有更好的解决办法，欢迎在下方留言。

效果图：

二、使用

本文基于github上的例子构建一个示例，现在本机上安装neo4j，网上安装的教程很多，再次不再赘述。现在开始准备Neovis.js
github地址：
https://github.com/neo4j-contrib/neovis.js
1.下载Neovis.js
我用官方提供的这个下载方式总是报错，所以不再使用，直接把项目克隆下来
2.
按照readme下面的Quickstart Example进行操作，准备数据

3.找到github项目中的示例文件

将github中的examples.simple-example.html文件复制到自己的flask项目中的templates中，把dist.neovis.js和dist.neovis.js.map复制到自己的flask项目中的static中，如下：

4.修改配置
下面主要介绍下需要修改simple-example.html文件
ps:
因为博主对前端知识了解不是很多，有纰漏或者解释不到位，敬请谅解

① 加入/static/neovis.js的路径，如下。

<script type="text/javascript" src="../static/neovis.js"></script>
1

②修改jQuery的路径，官网提供的好像不太好用

 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
1

③主要修改下面的function draw()

 <script type="text/javascript">
		// define config car
		// instantiate nodevis object
		// draw

		var viz;

		function draw() {
			var config = {
				container_id: "viz",
				server_url: "neo4j的地址",  // 注意端口号不是7474
				server_user: "neo4j用户名，一般为neo4j",
				server_password: "neo4j密码",
				 // labels是节点样式的配置,不写为默认配置
				labels: {
					"节点标签": {
						"caption": "显示的节点属性",
						"size": "points", // 节点大小，可以以节点属性值定义大小
						"font": {
                            "size":26, // 字体大小
                            "color":"#000000"  // 字体颜色
                                                 },
                        //"title_properties": [ // 节点提示中显示的属性，不写为显示所有
                        //    "nick_name",
                        //    "points"
                        //                ],
                        //"image": 'https://visjs.org/images/visjs_logo.png', // 可以用图片来显示节点
						//"community": "community"
						//"sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"  //获取节点大小的Cypher查询
					},

				},
				// relationships是关系的配置
				relationships: {
					"节点之间的关系": {
						"thickness": "关系的宽度",
						"caption": false  // 是否显示关系的属性
					},
				},
				arrows: true,  // 是否显示关系的箭头
				hierarchical: false, // 节点显示方式 是否启用分层布局
				initial_cypher: "MATCH n-[]->() RETURN p LIMIT 300"  // 初始化显示的
			};

			viz = new NeoVis.default(config);
			viz.render();
			console.log(viz);

		}
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

注意：

• server_url不是端口7474的那个，而是neo4jweb管理平台上显示的这个，如下图这个bolt://localhost:7687

• relationships的标签，中文不太好用，最好用英文
• initial_cypher: 是在显示这个页面时，初始化的执行语句

三、源码示例

GitHub链接: Neo4j Neovis Example