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 能够直接通过前端获取数据。
 
上代码， 首先下载依赖 
 npm install -save neo4j-driver
再页面中引入 
var neo4j = require("neo4j-driver");
export default {
   ...此处暂时省略...
页面初次加载调用 this.executeCypher() 执行 Cypher 查询数据 
 mounted() {
    var  query= 'MATCH p=()-->() RETURN p'
    this.executeCypher(query);
executeCypher()方法定义： 该方法处理的数据格式为echarts适用格式 
         * 直接执行Cypher
    executeCypher(query) {
      this.echartsNode = []  //节点数组
      this.nodesRelation = [] //关系线数组
      this.category = [] //echarts图例数据数
      // 创建实例
      this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'KG****'));
      console.log("🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~  this.drive", this.driver)
      let me = this;
      me.records = [];
      this.clearAll = true;
      let session = this.driver.session();
      if (query == "") return;
      session.run(query, {}).then((result) => {
        me.clearAll = false;
        me.records = result.records;
        console.log(




    
"neo4j 查询结果", result.records);
        session.close();
        me.closeLoading(false);
      }).catch(function (error) {
        console.log("Cypher 执行失败！", error);
        me.driver.close();
      });
    closeLoading(status) {
      console.log('closeLoading', status);
以上我们就查询到了数据，紧接着开始处理数据，首先处理成适用echarts的数据格式 
2、使用echarts绘图
 
首先处理获取的数据 
         * 直接执行Cypher
    executeCypher(query) {
      this.echartsNode = []  //节点数组
      this.nodesRelation = [] //关系线数组
      this.category = [] //echarts图例数据数
      // 创建实例
      this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', '******'));
      console.log("🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~  this.drive", this.driver)
      let me = this;
      me.records = [];
      this.clearAll = true;
      let session = this.driver.session();
      if (query == "") return;
      session.run(query, {}).then((result) => {
        me.clearAll = false;
        me.records = result.records;
        console.log("neo4j 查询结果", result.records);
// 开始处理数据
        for (let i = 0; i < me.records.length; i++) {
          this.echartsData.push({
            name: me.records[i]._fields[0].segments[0].start.properties.name,
            category: me.records[i]._fields[0].segments[0].start.labels[0]
          });
          this.echartsData.push({
            name: me.records[i]._fields[0].segments[0].end.properties.name,
            category: me.records[i]._fields[0].segments[0].end.labels[0]
          });
          this.nodesRelation.push({
            source: me.records[i]._fields[0].segments[0].start.properties.name,
            target: me.records[i]._fields[0].segments[0].end.properties.name,
            name: me.records[i]._fields[0].segments[0].relationship.type,
          });
        //删除arr中的重复对象
        var arrId = [];
        var legend = [];
        for (var item of this.echartsData) {
          legend.push({ name: item.category })
          if (arrId.indexOf(item.name) == -1) {
            arrId.push(item.name)
            this.echartsNode.push(item);
        this.category = Array.from(new Set(legend))
        session.close();
        me.closeLoading(false);
      }).catch(function (error) {
        console.log("Cypher 执行失败！", error);
        me.driver.close();
      });
      setTimeout(() => {
        this.knowlegGraphshow = true
       }




    
, 4000);
    closeLoading(status) {
      console.log('closeLoading', status);
echarts配置： 
this.options = {
                    tooltip: {//弹窗
                        show: false,
                        // enterable: true,//鼠标是否可进入提示框浮层中
                        // formatter: formatterHover,//修改鼠标悬停显示的内容
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        left: 10,
                        top: 20,
                        bottom: 20,
                        data: this.category
                    series: [
                            categories: this.category,
                            // categories: [{
                            //     name: "筹资渠道"
                            // }],
                            type: "graph",
                            layout: "force",
                            zoom: 0.6,
                            symbolSize: 60,
                            // 节点是否可以拖动
                            draggable: true,
                            roam: true,
                            hoverAnimation: false,
                            // labelLayout: {
                            //     hideOverlap: true,
                            // },
                            legendHoverLink: false,
                            nodeScaleRatio: 0.6, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
                            focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                            // categories: categories,
                            itemStyle: {
                                color: "#67A3FF",
                            edgeSymbol: ["", "arrow"],
                            // edgeSymbolSize: [80, 10],
                            edgeLabel: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12,
                                    formatter(x) {
                                        return x.data.name;
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12,
                                    color: "#f6f6f6",
                                    textBorderColor: '#67A3FF',
                                    textBorderWidth: '1.3',
                                    // 多字换行
                                    formatter: function (params) {
                                        // console.log(params);
                                        var newParamsName = "";
                                        var paramsNameNumber = params.name.length;
                                        var provideNumber = 7; //一行显示几个字
                                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                        if (paramsNameNumber > provideNumber) {
                                            for (var p = 0; p < rowNumber; p++) {
                                                var tempStr = "";
                                                var start = p * provideNumber;
                                                var end = start + provideNumber;
                                                if (p == rowNumber - 1) {
                                                    tempStr = params.name.substring(start, paramsNameNumber);
                                                } else {
                                                    tempStr = params.name.substring(start, end) + "\n\n";
                                                newParamsName += tempStr;
                                        } else {
                                            newParamsName = params.name;
                                        return newParamsName;
                            force: {
                                repulsion: 200, // 节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                                gravity: 0.01, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                                edgeLength: 400, // 边的两个节点之间的距离，这个距离也会受 repulsion影响 。值越大则长度越长
                                layoutAnimation: true, // 因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画
                                // 在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
                            data: this.data,
                            links: this.links,
                            // categories: this.categories
3、使用vis.js绘图
 
下载依赖： 
npm install -s vis,js
//import Vis from "vis";
const Vis = require('vis-network/dist/vis-network.min');
require('vis-network/dist/dist/vis-network.min.css');
首先处理数据： 
在这里插入代码片
         * 直接执行Cypher
    executeCypher(query) {
      this.echartsNode = []  //节点数组
      this.nodesRelation = [] //关系线数组
      // 创建实例
      this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', 'KG****'));
      console.log("🚀 ~ file: AuthorArticleSearch.vue ~ line 46 ~ mounted ~  this.drive", this.driver)
      let me = this;
      me.records = [];
      this.clearAll = true;
      let session = this.driver.session();




    

      if (query == "") return;
      session.run(query, {}).then((result) => {
        me.clearAll = false;
        me.records = result.records;
        console.log("neo4j 查询结果", result.records);
        // 开始处理数据
        let nodes = new Set();
        for (let i = 0; i < me.records.length; i++) {
          nodes.add(me.records[i]._fields[0].segments[0].start.properties.name);
          nodes.add(me.records[i]._fields[0].segments[0].end.properties.name);
          this.nodesRelation.push({
            from: me.records[i]._fields[0].segments[0].start.properties.name,
            to: me.records[i]._fields[0].segments[0].end.properties.name,
            label: me.records[i]._fields[0].segments[0].relationship.type,
            id: i,
          });
        nodes.forEach((e) => {
          this.echartsData.push({
            label: e,
            id: e,
          });
        session.close();
        me.closeLoading(false);
      }).catch(function (error) {
        console.log("Cypher 执行失败！", error);
        me.driver.close();
      });
      this.nodesArray = this.echartsData  //节点数组
      this.edgesArray = this.nodesRelation //关系线数组
      setTimeout(() => {
        this.knowlegGraphshow = true
       }, 4000);
    closeLoading(status) {
      console.log('closeLoading', status);
定义绘图dom元素 
// width,height 画布的宽度，高度。 可以是百分比或像素，一般在dom元素上设置 -->
     <div v-if="knowlegGraphshow == true" id="network_id" ref="network_id" class="network" style="height: 100%;">
     </div> 
调用绘图方法： 
 // vis.js画图
    visDraw() {
      let container = this.$refs.network_id;
      let data = { nodes: this.nodesArray, edges: this.edgesArray }
      console.log("🚀 ~ file: pageKnowlegGraph.vue ~ line 135 ~ visDraw ~ data", data)
      let options = {
        autoResize: true,
        // / 设置节点样式
        nodes: {
          shape: "dot",
          size: 20,
          font: {
            //字体配置
            size: 20
          color: {
            // border: "#2B7CE9", //节点边框颜色
            background: "#97C2FC", //节点背景颜色
            highlight: {
              //节点选中时状态颜色
              border: "#2B7CE9",
              background: "#D2E5FF"
            hover: {
              //节点鼠标滑过时状态颜色
              border: "#2B7CE9",
              background: "#D2E5FF"
          borderWidth: 0, //节点边框宽度，单位为px
          borderWidthSelected: 2 //节点被选中时边框的宽度，单位为px
        // 边线配置
        edges: {
          width: 1,
          length: 260,
          color: {
            color: "#848484",
            highlight: "#848484",
            hover: "#848484",
            inherit: "from",
            opacity: 1.0
          shadow: false,
          smooth: {
            //设置两个节点之前的连线的状态
            enabled: false //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
          arrows: { to: true } //箭头指向to
        //计算节点之前斥力，进行自动排列的属性
        physics: {
          // enabled: true, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
          // barnesHut: {
          //   gravitationalConstant: -4000,
          //   centralGravity: 0.3,
          //   springLength: 120,
          //   springConstant: 0.04,
          //   damping: 0.09,
          //   avoidOverlap: 0
          // },
        // physics: false,
        //用于所有用户与网络的交互。处理鼠标和触摸事件以及导航按钮和弹出窗口
        interaction: {
          hover: true,
          dragNodes: true, //是否能拖动节点
          dragView: true, //是否能拖动画布
          // hover: true, //鼠标移过后加粗该节点和连接线
          // multiselect: true, //按 ctrl 多选
          // selectable: true, //是否可以点击选择
          // selectConnectedEdges: true, //选择节点后是否显示连接线
          // hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
          zoomView: true //是否能缩放画布
      this.network = new Vis.Network(container, data, options);
源码已上传，需要的小伙伴可前往主页找到下载。
                                    知识图谱是一种以图谱形式描述客观世界中存在的各种实体、概念及其关系的技术,  广泛应用于智能搜索、自动问答和决策支持等领域.  可视分析技术可以将抽象的知识图谱映射为图形元素,  帮助用户直观地感知和分析数据,  从而提高知识图谱的构建和表达,  也为知识图谱在各个领域的应用提供了有力支持。知识图谱技术包括知识表示、知识图谱构建和知识图谱应用 3 方面的研究内容。其中,  知识表示研究客观世界知识的建模,该过程需要用户设计合适的方法建模知识以方便机器识别和理解;
                                    vue+neo4j+（neovis.js / neo4j-driver）纯前端实现知识图谱的集成
一、Neovis.js 不用获取数据直接连接数据库绘图
二、 neo4j-driver 能够直接通过前端获取数据。
三、vis.js 绘图
四、 echarts绘图
neo4j是什么？
简单来说，这是一种比较热门的图数据库，图数据库以图形形式存储数据。 它以节点，关系和属性的形式存储应用程序的数据。 一个图由无数的节点和关系组成。
安装图数据库在这里就不介绍了，本篇主要介绍如何连接neo4j数据库，将知识图谱成功显示在前端页面中。
Neovis.js与Neo4j的连接非常简单明了，并且Neovis 的数据格式与那neo4j数据库保持一致。在单个配置对象中定义标签、属性、节点和关系的样式和颜色。
发现一个很有用的Vue插件：https://www.npmjs.com/package/vue-neo4j
这个能在前端直连neo4j服务器啦，下图就是测试效果绘制三国人物图谱关系
vue  3.0版本
vue-neo4j  0.4.8版本
neo4j服务端版本 4.3.6版本，可以直接去官网下载。
echarts 5.22版本
一、windows服务器部署neo4j
1、部署jdk11, 因为neo4j 4.3.6使用的版本是jdk11以上，否则启动不了哦
                                    出现neo4j._exceptions.BoltHandshakeError: The Neo4J server does not support communication with this driver.
                                    先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。它以节点，关系和属性的形式存储应用程序的数据。以上我们就查询到了数据，紧接着开始处理数据，首先处理成适用echarts的数据格式。...
                                    实现了基于Neo4j图数据库的毕业论文知识图谱的构建，针对某一技术知识图谱的搜索，通过自然语言中文分词实现绘制高频词汇云，分析近几年专业领域的发展热点，以及其他信息的可视化等功能，然后，基于前后端分离的开发模式，前端使用Vue脚手架搭建前端工程，后端使用SpringBoot搭建后端工程，并整合了JWT、shiro等框架，最终通过Nginx服务器部署发布，为学校管理员老师提供一个可视化的系统。SpringBoot、vue.js、neo4j数据库、知识图谱。
目前存在这样的需求，需要Neo4j图数据库存储表级血缘关系，血缘关系图要在前端页面进行展示；
Neo4j自带的浏览器方式无法集成到前端项目中，因此需要采用前端技术。
首先获取neo4j中的数据，解析成json格式（之所以解析成json格式是因为D3.js的需要）
需要以下两个jar包依赖:
连接neo4j，获取到数据resultSet
private Connection getNeo4jConnection() throws SQLException {
        Conne
                                    使用neovis的文章还是比较少的，而且api不多，对于想修改样式或者在不同项目中使用都会有各种各样的问题，这篇文章以后会更新，因为坑很多，希望各位使用者可以一起讨论交流~
                                    Neo4J Cypher neo4j-driver介绍与使用neo4j介绍关系型数据库和图数据库图数据库的基本概念简单例子NodesLabelsRelationshipRelationshipTypePropertiesSchemaCypherneo4j-driver参考链接
neo4j介绍
先简单介绍一下neo4j,Cpyher,neo4j-driver之间的关系
neo4j 是一个图数据库，专门存储图结构，图的定义;
Cpyher 是Neo4J的声明式图形查询语言，类似于传统数据库的SQL;
neo4
                                    一、neo4j-driver的安装:
neo4j-driver简介: neo4j-driver是一个python中的package, 作为python中neo4j的驱动, 帮助我们在python程序中更好的使用图数据库.
pip install neo4j-driver
1、neo4j-driver使用演示:
from neo4j import GraphDatabase
# 关于neo4j数据库的用户名,密码信息已经配置在同目录下的config.py文件中
from config import NEO
                                    技术栈前台是基于vue + d3.js ,后台是springboot配合Neo4j.实现的基本功能:新增节点,添加连线,快速添加节点和关系节点的颜色和大小可修改节点和关系的编辑,删除导出成图片csv导入导出csv添加图片和富文本节点之间多个关系增加直接执行cypher功能运行与启动安装jdk安装Neo4jIDEA 导入项目导入成功后对着项目根目录，右键->maven->reimport...
                                    Neo4j
 Neo4j是一个高性能的,NOSQL图形数据库，它将结构化数据存储在网络上而不是表中。Neo4j也可以被看作是一个高性能的图引擎，该引擎具有成熟数据库的所有特性。
  在一个图中包含两种基本的数据类型：Nodes（节点） 和 Relationships（关系）。Nodes 和 Relationships 包含key/value形式的属性。Nodes通过Relationships所定义的关系相连起来，形成关系型网络结构。其形式如下：
  基于neo4j的这种存储特点，经常...
                                    在Vue中使用3d-force-graph渲染neo4j图谱
最近用3d-force-graph做了下neo4j的可视化，3D效果很好。并总结了下3d-force-graph库在vue.js下的的简单使用，如有描述错误的地方敬请指出，请勿抄袭，尊重作者。
插件地址 ???? github to: 3d-force-graph
演示地址 ???? large-graph-example
创建template标签，创建一个渲染容器标签graph，对其引用。
<template>
                                    前言最近项目需求,要做一个知识图谱,参照为思知.然后就去看了一下效果及他的实现方案,也找了其他的方案,对比之后发现echarts的关系图实现起来比较简单,于是乎就基于echarts的graph关系图实现.(ps:思知实现方式是d3).效果图正文接下来开始讲解代码逻辑:目录结构KnowledgeGraph.vue文件为外层大页面keywords.vue 文件为类目滚动页面charts.vue 文件为...