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

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

neo4j是什么?

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

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

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

首先下载依赖

 npm install -save neovis.js

在项目中引用

import NeoVis from 'neovis.js';

创建用来绘图的DOM元素

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

页面加载进来调用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();
     },
    }

效果图:
在这里插入图片描述

二、vis.js 或者 echarts绘图

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

  • 9
    点赞
  • 74
    收藏
    觉得还不错? 一键收藏
  • 10
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值