neo4j导出html,Neo4j前端可视化组件Neovis.js使用说明

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

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的路径，如下。

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

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

// define config car

// instantiate nodevis object

// draw

var viz;

function draw() {

var config = {

container_id: "viz",

server_url: "后端neo4j的地址",

server_user: "neo4j用户名，一般为neo4j",

server_password: "neo4j密码",

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"

},

},

relationships: {

"节点之间的关系": {

"thickness": "关系的宽度",

"caption": false

},

},

initial_cypher: "MATCH n-[]->() RETURN p LIMIT 300"

};

viz = new NeoVis.default(config);

viz.render();

console.log(viz);

}

注意：

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

relationships的标签，中文不太好用，最好用英文

initial_cypher: 是在显示这个页面时，初始化的执行语句

Neo4j前端可视化组件Neovis.js使用说明相关教程