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>
②修改jQuery的路径，官网提供的好像不太好用
 
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
③主要修改下面的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>
server_url不是端口7474的那个，而是neo4jweb管理平台上显示的这个，如下图这个bolt://localhost:7687
 
relationships的标签，中文不太好用，最好用英文
initial_cypher: 是在显示这个页面时，初始化的执行语句
 
三、源码示例
 
GitHub链接: Neo4j Neovis Example
                                    vue+neo4j+（neovis.js / neo4j-driver）纯前端实现知识图谱的集成
一、Neovis.js 不用获取数据直接连接数据库绘图
二、 neo4j-driver 能够直接通过前端获取数据。
三、vis.js 绘图
四、 echarts绘图
neo4j是什么？
简单来说，这是一种比较热门的图数据库，图数据库以图形形式存储数据。 它以节点，关系和属性的形式存储应用程序的数据。 一个图由无数的节点和关系组成。
安装图数据库在这里就不介绍了，本篇主要介绍如何连接neo4j数据库，将知识图谱成功显示在前端页面中。
Neovis.js与Neo4j的连接非常简单明了，并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义标签、属性、节点和关系的样式和颜色。
                                    如何在网页前端里可视化你的知识图谱
最近费尽千辛万苦构造了一份可以用（大概）的知识图谱，并且把要利用知识图谱做的领域命名实体识别和一些推荐的功能做成Web版的demo，顺带想实现一些可视化知识图谱的功能。
（凭啥知识图谱就只能在Neo4j里自嗨，不能来前端show一下，歧视吗(￢_￢)）
找了做前端图表展示的开源库，D3.js和Echarts都能做，我拿Echarts实现了一下功能，先看一下在现在项目里一个基于知识图谱查询的实际效果：
接下里看看如何的实现：
首先在本地下载Echarts相关的js文件，在线引用也可以，html文件里如下引用：
给要展示的图准备一个Dom：
                                    Neo4j前端可视化组件Neovis.js使用说明Neo4j前端可视化组件Neovis.js使用说明Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。在单个配置对象中定义基于标签、属性、节点和关系的自定义和着色样式。在使用的过程中，发现了该库的一个缺...
                                    之前已经写过一篇文章简要介绍了图数据库neo4j的概念，没看过的读者可以在此点链接《图数据库Neo4j简介》。本文主要讲解图数据库在真实项目中的实践应用，取自于笔者参与的真实项目代码。
后端用的是图数据库neo4j来存节点和关系，前端用的是D3来画图。前后端交互是通过json数据来完成的，即neo4j查出的结果组装成json后，传递给D3来画图。
                                    Vis.js 是一个动态的基于浏览器的可视化库，特点是易用，可处理大量的动态数据，并与这些数据进行交互操作。该库包含 DataSet, Timeline, and Graph.示例代码：
  <title>Timeline | Basic demo</title>
  [removed][removed]
  <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body, html {
      font-family: sans-serif;
  </style>
</head>
[removed]
  var container = document.getElementById('mytimeline');
  var data = [
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  var options = {};
  var timeline = new vis.Timeline(container, data, options);
[removed]
</body>
</html>可视化效果：
                            标签：Visjs
                                    随着互联网不断的发展，传统的关系型数据库如oracle，mysql已经难以支撑现下大数据量，高并发的场景了。于是，NoSQL横空出世，有像cassandra这样的column-based，像MongoDB这样document-based。今天在这里猎奇的是一个graph-based的数据库，Neo4j。
Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。
                                    先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。它以节点，关系和属性的形式存储应用程序的数据。以上我们就查询到了数据，紧接着开始处理数据，首先处理成适用echarts的数据格式。...
                                    可与neo4j图数据库无缝对接，配备基于nodejs写的请求后台服务。前端可通过url+cypher查询语句，返回构建好的json数据。
3D分层展示
节点柱状图信息展示
与Gis互通消息，互动展示
Gis互动，地图样式多样
demo1
demo2
后台服务介绍
1：config.js 配置连接neo4j的相关参数
2：启动数据服务 在控制台输入“node index.js”
3：提供get和post两种查询neo4j的方法
get方法如：
http://127.0.0.1:8080/query?