一、说明
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