位置: IT常识 - 正文

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

编辑：rootadmin

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

推荐整理分享neovis.js+vue实现知识图谱前端展示,踩坑后的经验分享！！！(vue onshow)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue展示neo4j,vue onshow,vue.js v-on,vue onshow,vue基于nodejs,vueorg.js,vue基于nodejs,vue基于nodejs,内容如对您有帮助，希望把文章链接给更多的朋友！

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元素

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://www.yuucn.com/wp-content/uploads/2023/05/1683650546-3c2fc84a9c77a6a.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://www.yuucn.com/wp-content/uploads/2023/05/1683650546-3c2fc84a9c77a6a.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()

清除网络可视化