vue+neo4j +纯前端（neovis.js neo4j-driver） 实现 知识图谱的集成 大干货--踩坑无数！！！将经验分享给有需要的小伙伴

vue+neo4j+（neovis.js / neo4j-driver）纯前端实现知识图谱的集成

• neo4j是什么？
• 一、Neovis.js 不用获取数据直接连接数据库绘图
• 二、vis.js 或者 echarts绘图
• 1、（发现一个神器） neo4j-driver 能够直接通过前端获取数据。
• 2、使用echarts绘图
• 3、使用vis.js绘图

neo4j是什么？

简单来说，这是一种比较热门的图数据库，图数据库以图形形式存储数据。 它以节点，关系和属性的形式存储应用程序的数据。 一个图由无数的节点和关系组成。
安装图数据库在这里就不介绍了，本篇主要介绍如何连接neo4j数据库，将知识图谱成功显示在前端页面中。

一、Neovis.js 不用获取数据直接连接数据库绘图

1.、 Neovis.js与Neo4j的连接非常简单明了，并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义标签、属性、节点和关系的样式和颜色。

首先下载依赖

 npm install -save neovis.js
1

在项目中引用

import NeoVis from 'neovis.js';
1

创建用来绘图的DOM元素

<div style="height:100%;" ref="Screen">
    <div class="left" id="viz1" ref="viz1"></div>
 </div> -->
1
2
3

页面加载进来调用draw()画图函数

    mounted() {
     this.draw();
    },
    //neovis.js画图
    methods:{
     draw() {
       //获取dom元素
      var viz1 = this.$refs.viz1;
      
      //创建veovis实例
      var viz;
      
      //配置项
      var config = {
        container_id: "viz",
        //neo4j服务器地址，用户名 和 密码
        server_url: "bolt://192.x.xxx.10:7687",
        server_user: "nexx4j",
        server_password: "KGxxx34",

        **///labels是节点央样式的配置：**
        **/// caption ：节点显示的文字对应内容
        **/// community： 节点颜色**
        **/// size：节点大小**
        **/// font：节点字体大小设置****
        **//没有在这个地方配置的节点将会是默认样式**
        labels: {
          "CITY": { caption: "name", community: "#5496FF", size: 200, font: { size: 35, color: "#606266", }, },
          "基本待遇政策": { caption: "name", community: "#5496FF", size: 95, font: { size: 25, color: "#606266", } },
          "基本筹资政策": { caption: "name", community: "#5496FF", size: 95, font: { size: 25, color: "#606266", }, },
        },
        
        **///relationships是关系线段样式的配置：**
        **/// caption ：线段显示的文字对应内容
        **/// thickness： 线段粗细**
        **/// font：节点字体大小设置****
        **//没有在这个地方配置的线段将会是默认样式**
        relationships: {
          "待遇支付政策": { thickness: 1, caption: true, font: { size: 15, color: "#606266", }, },
          "待遇主体类别": { thickness: "count", caption: true, font: { size: 15, color: "#606266", }, },
        },
        
        //是否显示箭头
        arrows: true,

        hierarchical: true,
        
        // 分层结构或者默认 "hubsize"（默认）和"directed".
        // hierarchical_sort_method: 'hubsize',
        hierarchical_sort_method: 'directed',

        //配置数据库查询语句，MATCH n RETURN n,尝试过不对，必须用 MATCH p=()-->() RETURN p
        initial_cypher: 'MATCH p=()-->() RETURN p',
      };

      viz = new NeoVis(config);
      viz._container = viz1;
      viz.render();
     },
    }
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
51
52
53
54
55
56
57
58
59
60

效果图：

二、vis.js 或者 echarts绘图

由于这两者需要的数据格式与neo4j数据格式不同，所以需要先从前端获取数据，然后处理成我们需要的格式。
1