首页 前端知识 neo4j vue2 vis.js渲染图表(自用记录)

neo4j vue2 vis.js渲染图表(自用记录)

2024-05-24 08:05:00 前端知识 前端哥 342 781 我要收藏

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

1、安装环境

npm install -save neovis.js

npm install neo4j-driver

npm install vis --save  

2、入口函数中引用

import vis from "vis";

Vue.prototype.$vis = vis;

1、局部引入neo4j工具   import neo4j from "neo4j-driver"

2、处理数据的函数(根据自己返回的数据结构进行处理,没什么参考价值)

//实参是你的neo4j里调用的放法

let query=“MATCH (n) RETURN n LIMIT 25”

 dealData(query) {

      this.echartsNode = []  //节点数组

      this.nodesRelation = [] //关系线数组

      this.category = [] //echarts图例数据数

      let newNodes = []

      // 创建实例

     //1、获取到你数据库里的数据

       this.driver = neo4j.driver('bolt://localhost:8081', neo4j.auth.basic('neo4j', '你的密码'));

      // this.driver = neo4j.driver('bolt://localhost:7687', neo4j.auth.basic('neo4j', '123456'));

      console.log("this.drive", this.driver)

      let that = this;

      that .records = [];

      this.clearAll = true;

      let session = this.driver.session();

      if (query == "") return;

      session.run(query, {}).then((result) => {

        console.log("result", result);

        that .clearAll = false;

        that .records = result.records;

        console.log("neo4j 查询结果", result.records);

        // 准备label的字典

        let idList = []

        let newData = []

        // 开始处理数据

        // 拿到要展示的label字典,我是根据这个写死的

        for (let i = 0; i < that .records.length; i++) {

          idList.push(that .records[i]._fields[1][0].type)

          let index1 = newData.findIndex(item => {

            return item.label === that .records[i]._fields[2].labels[0]

          })

          if (index1 === -1) {

            newData.push({

              label: that .records[i]._fields[2].labels[0],

              value: that .records[i]._fields[2].properties

            })

          }

          // 拼接边数据和节点数据(边数据可以没有id可以重复,节点数据需要id不可以重复)

          let index = newNodes.findIndex(item => {

            return item.id === that .records[i]._fields[2].identity.low

          })

          if (index === -1) {

            // 节点数据

            newNodes.push({

              id: that .records[i]._fields[2].identity.low,

              label: that .records[i]._fields[2].properties[that .dealLabels(that .records[i]._fields[2].labels[0])],

              properties: that .records[i]._fields[2].properties })

          }

          // 边数据

         this.nodesRelation.push({

            from: that .records[i]._fields[1][0].start.low,

            to: that .records[i]._fields[1][0].end.low,

            label: that .records[i]._fields[1][0].type,

            // id: that .records[i]._fields[1][0].identity.low,

            properties: that .records[i]._fields[1][0].properties

          });

        }

        console.log("labelList", newData, idList);

        console.log("value", this.nodesRelation, newNodes);

        this.nodesArray = newNodes  //节点数组

        this.edgesArray = this.nodesRelation //关系线数组

        this.$nextTick(() => {

          this.visDraw()

        })

        session.close();

        that .closeLoading(false);

      }).catch(function (error) {

        console.log("Cypher 执行失败!", error);

        that .driver.close();

        session.close();

      });

    },

 图表渲染

 visDraw() {

      let container = this.$refs.network_id;

      let data = { nodes: this.nodesArray, edges: this.edgesArray }

      console.log("🚀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 this.$vis.Network(container, data, options);

    },

 

vis.js 是一个用于创建动态、交互式网络图表的 JavaScript 库。在使用 vis.js 创建图表时,你需要提供 nodes 和 edges 数据来定义图表的结构。

Nodes(节点)

nodes 是一个数组,其中包含图表中所有节点的信息。每个节点对象通常包含以下属性:

  • id (必需): 节点的唯一标识符,通常是字符串或数字。
  • label (可选): 节点的标签,显示在图表中的节点旁边。
  • 其他自定义属性 (可选): 你可以根据需要添加任何自定义属性到节点对象中,这些属性可以在后续的操作中用于渲染、交互等。
  • 例:{  
      id: 1,  
      label: 'Node 1',  
      // 其他自定义属性...  
    }

    Edges(边)

    edges 也是一个数组,其中包含图表中所有边的信息。每个边对象通常包含以下属性:

  • from (必需): 边的起始节点的 id
  • to (必需): 边的目标节点的 id
  • label (可选): 边的标签,显示在图表中的边上。
  • arrows (可选): 一个对象,用于定义边的箭头样式。
  • dashes (可选): 一个布尔值或对象,用于定义边的虚线样式。
  • 其他自定义属性 (可选): 和节点一样,你也可以添加任何自定义属性到边对象中。
  • 例:{  
      from: 1,  
      to: 2,  
      label: 'Edge 1-2',  
      // 其他自定义属性...  
    }

 个人的数据举例:带有start和end的是边数据,边数据是可以重复的且id不为必须,根据边数据将节点数据进行连接

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9284.html
标签
neo4j
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!