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

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
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数据格式不同，所以需要先从前端获取数据，然后处理成我们需要的格式。
1、（发现一个神器） neo4j-driver 能够直接通过前端获取数据。

                    先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。它以节点，关系和属性的形式存储应用程序的数据。以上我们就查询到了数据，紧接着开始处理数据，首先处理成适用echarts的数据格式。...
				Welcome to the Neo4j wiki!
这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具
小工具是前台是基于vue + d3.js ,后台是springboot配合Neo4j.
实现的基本功能:
新增节点,添加连线,快速添加节点和关系
节点的颜色和大小可修改
节点和关系的编辑,......
这是一个知识图谱构建工具,最开始是对产品和领导为了做ppt临时要求配合做图谱展示的不厌其烦,做着做着就抽出一个目前看着还算通用的小工具，知识图谱可视化，仅供做知识图谱的小伙伴参考
小工具是前台是基于vue + d3.js ,后台是springboot配合Neo4j.
demo地址：.
实现的基本功能:
新增节点,添加连线,快速添加节点和关系
节点的颜色和大小可修改
节点和关系的编辑,删除
导出成图片
csv导入
导出csv
添加图片和富文本
节点之间多个关系
增加直接执行cypher功能
后续优化:
新建单节点,节点的位置能指定(或者和鼠标点下的位置一致) over 2018-11-16
做出的图谱能够导出成图片 over 2018-11-16
支持导入功能,同时支持导出关系和节点 over 2018-11-17
输入一段文本,通过自然语言等手段,抽出实体和关系,编辑后
				vue+neo4j+（neovis.js / neo4j-driver）纯前端实现知识图谱的集成
一、Neovis.js 不用获取数据直接连接数据库绘图
二、 neo4j-driver 能够直接通过前端获取数据。
三、vis.js 绘图
四、 echarts绘图
neo4j是什么？
简单来说，这是一种比较热门的图数据库，图数据库以图形形式存储数据。 它以节点，关系和属性的形式存储应用程序的数据。 一个图由无数的节点和关系组成。
安装图数据库在这里就不介绍了，本篇主要介绍如何连接neo4j数据库，将知识图谱成功显示在前端页面中。
Neovis.js与Neo4j的连接非常简单明了，并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义标签、属性、节点和关系的样式和颜色。
				随着互联网不断的发展，传统的关系型数据库如oracle，mysql已经难以支撑现下大数据量，高并发的场景了。于是，NoSQL横空出世，有像cassandra这样的column-based，像MongoDB这样document-based。今天在这里猎奇的是一个graph-based的数据库，Neo4j。
Neovis.js将JavaScript可视化和Neo4j无缝集成。与Neo4j的连接非常简单明了，并且由于它是在Neo4j的属性图模型的基础上构建的，因此 Neovis 的数据格式与数据库保持一致。
				neo4j是一个优秀的图形数据库，可以方便地存储和处理图形数据。springboot是一种流行的Java开发框架，可以轻松地集成各种组件。Vue是一个流行的JavaScript框架，用于构建现代化的Web应用程序。D3.js是一个用于数据可视化的JavaScript库，它可以用来创建各种漂亮的图形和可视化方式。
通过结合neo4j、springboot、Vue和D3.js，我们可以轻松地构建和可视化运行知识图谱。我们可以使用neo4j来存储和查询各种实体和关系，比如人物、组织、事件等。使用springboot可以编写Java代码来连接数据库、处理查询和构建Web服务。Vue框架则可以用来构建前端页面和组件，以便用户可以通过Web浏览器和服务之间进行交互。D3.js库可以用来构建各种图形和可视化效果，以便用户可以更好地理解和探索知识图谱的数据。
为了构建知识图谱，我们需要首先定义实体和关系的模型，并使用Cypher语言来插入数据和查询数据。然后，我们可以通过springboot将数据库连接到Web服务，为用户提供API接口来查询和遍历图谱。最后，我们可以使用Vue框架来构建可交互性的前端页面，展示图谱和与用户进行交互。D3.js库可以用来构建各种图形和可视化效果，如力导向图、树状图、矩阵图等，以显示节点和关系之间的复杂关系。
总之，结合neo4j、springboot、Vue和D3.js可以轻松地构建和可视化运行知识图谱。这些工具和框架都具有丰富的功能和强大的生态系统，可以大大简化开发过程，快速构建高效、美观和易于扩展的知识图谱应用程序。
                    还是叫我滚去学习吧: 
                    请问大佬，为什么我照着代码敲的，一直提示“Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'hasChildNodes')"
”，用neovis还是vis都报这个错
                vue+neo4j +纯前端（neovis.js neo4j-driver） 实现 知识图谱的集成 大干货--踩坑无数！！！将经验分享给有需要的小伙伴
                    BeikeDream: 
                    怎末给关系显示文字呢？就是节点和节点的连线怎么显示文字呢？
                vue+flv.js+SpringBoot+websocket实现视频监控与回放
                    m0_53265725: 
                    你好，解决了嘛，我是客户端连接1个没问题，连接第二个就会报这个格式不是flv的错