neovis.js+vue实现知识图谱前端展示,踩坑后的经验分享!!!

发布时间:2023-05-06 19:00

一、说明

        Neovis.js将JavaScript可视化和Neo4j无缝集成。 Neovis 的数据格式与数据库保持一致,可以直接连接数据库。就是需要将neo4j的地址、用户名、密码写在展示的html文件中,这使得数据不够安全

二、使用

github地址:https://github.com/neo4j-contrib/neovis.js

1.下载:

npm install --save neovis.js@v1.5.0

2.引入:

 import NeoVis from 'neovis.js/dist/neovis.js'

3.html创建DOM元素

<div ref="viz" id="viz" style="width:100%;height:100%"></div>

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

draw () {
      // config 配置项
      var config = {
        container_id: 'viz', //dom元素id
        // neo4j服务器地址,用户名 和 密码
        server_url: 'bolt://xx.xx.xx.xx:7687', //连接的地址是端口号为7687的不是7474
        server_user: '用户名',
        server_password: '密码',

        // labels是节点样式的配置
        // 没有在这个地方配置的节点将会是默认样式
        labels: {
          员工: {
            caption: 'show',  // 节点显示的文字对应内容key
            community: 'community', //节点颜色 String:要用作社区(color)的属性名。默认为“按标签着色”。
            size: 'pagerank',  // 用作节点大小的属性名。默认为1。
            // image: 'https://visjs.org/images/visjs_logo.png',
            // 节点字体大小设置
            font: { size: 15, color: '#606266' },
            title_properties: ['age'] //如果提供了title_properties,则工具提示中将只显示其中列出的属性。否则,所有属性都显示在工具提示中。
            //sizeCypher: String:获取节点大小的Cypher查询。$id表示要查询大小的节点的id,Cypher查询应该返回Neo4jNumber。config.labels.sizeCypher的优先级高于config.labels.size,即sizeCypher将覆盖size字段的结果大小。
          },
          员工属性: {
            caption: 'show',
            community: 'community',
            // group: 'community',
            size: 'pagerank',
            // image: 'https://visjs.org/images/visjs_logo.png',
            font: { size: 14, color: '#606266' },
          }
        },
        // relationships是关系线段样式的配置
        // 没有在这个地方配置的线段将会是默认样式
        relationships: {
          该员工参与项目: { 
             thickness: 'weight',  //String:线段粗细,用作边缘厚度的属性名。默认为1。
             caption: true,  //Boolean:如果设置为true,则关系类型将显示为边缘标题。或String:用作边缘标题的属性名。
             font: { size: 12, color: '#606266' }  // 关系节点文字大小颜色
          },
          员工属性: { thickness: 'weight', caption: true, font: { size: 12, color: '#606266' } },
          asks: {
            thickness: 'weight',
            caption: true //Boolean:如果设置为true,则关系类型将显示为边缘标题。或String:用作边缘标题的属性名。
          }
        },

        // 关系线段是否显示箭头
        arrows: true,

        hierarchical: false, // 节点显示方式 是否启用分层布局后
        // 分层结构或者默认 "hubsize"(默认)和"directed".
        hierarchical_sort_method: 'directed',
        encrypted: 'ENCRYPTION_OFF', // "ENCRYPTION_OFF" (default) or "ENCRYPTION_ON"
        trust: 'TRUST_ALL_CERTIFICATES', // "TRUST_ALL_CERTIFICATES" (default) or "TRUST_SYSTEM_CA_SIGNED_CERTIFICATES"
        // 配置数据库查询语句, 替换成自己的查询语句才可以显示
        initial_cypher: 'MATCH (n:`员工`) RETURN n LIMIT 25'
      }
  
      this.viz = new NeoVis(config)
      this.viz.render() // 渲染
       // 注册点击事件,点击后执行函数 在nodeClick(自己编写的函数)函数中实现,如果不需要点击节点触发功能,则此方法省略
      this.viz.registerOnEvent('clickNode', this.nodeClick)

    },

根据上文 则可以显示对应neo4j数据库里面所有的员工节点的前25条数据。

点击节点触发的函数

// 此函数为注册的点击函数,根据自己的需求编写逻辑
//node参数为点击时neovis返回的当前节点数据{nodeId:'节点的id',node:当前节点对象}
nodeClick (node) {
      this.viz._network.off('click') 
      const statement ='match p = (n)-[r]->() where id(n)= ' + node.nodeId + ' return p'
      this.viz.updateWithCypher(statement) // 点击节点后增加查询语句 更新数据,添加最新查到的数据
    },

点击节点,使用updateWithCypher方法后,点击事件会多次挂载;所以每次执updateWithCypher方法之前要解绑之前绑定的点击事件this.viz._network.off('click')

三、文档描述: 

new Neovis(config)

Neovis的构造函数。根据给定的配置创建新的Neovis对象。config请参阅以上代码中的注释配置

Neovis.clearNetwork()

清除网络可视化

Neoivs.registerOnEvent(eventType,handler)

注册事件函数eventType事件类型,handler用于管理事件的处理程序,也就是需要执行的函数

eventType事件类型:clickNode、clickEdge、completed、error

Neovis.reinit(config)

使用新的config对象重新初始化网络可视化。请参阅配置

Neovis.reload()

重新加载可视化。将再次从config对象中的initial_cypher从Neo4j获取数据。

Neovis.stabilize()

停止物理模拟、稳定可视化效果。

Neovis.renderWithCypher(statement)

使用Cypher语句的结果呈现新的可视化效果。Cypher查询中返回的任何NodeRelationship对象都将在可视化中呈现。当前不支持路径。

Neovis.updateWithCypher(statement)

使用Cypher语句的结果更新当前可视化,重新指定当前节点。Cypher查询中返回的任何NodeRelationship对象都将在可视化中呈现。当前不支持路径。此函数不会更改renderWithCypher或初始密码给出的原始查询。

config

配置项都在draw函数中以注释的形式标注

一个配置对象,它定义:

  • 如何连接Neo4j(必选)
  • 用于加载可视化数据的初始Cypher查询(可选)
  • 应在其中呈现可视化效果的DOM元素(必需)
  • 如何设置可视化元素的样式(labelsrelationships)(必需)

更多配置内容可进入github查看,或阅读源码

注意:由于我之前下载2.0版本不管是npm下载还是直接引入js文件都一直报错所以使用了1.5版本

问题:

        1.刚开始使用一直加载不出来节点数据,是因为 initial_cypher 赋值的查询代码写错了

        2.查询出来节点没有关系线段连接,是因为initial_cypher 查询语句只查询了节点 没有把关系查询出来,如下代码,使用身份证号 把“当前员工”和当前员工的“员工属性”节点以及节点关系查询出来(根据自己的数据库内容条件查询数据)

MATCH (f:`员工` {card_id: "此处是身份证号"})-[r:`员工属性`]->(q:`员工属性` {card_id: "此处是身份证号"}) RETURN *

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号