一    
    
    
    
    
    
、说明

        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://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()

清除网络可视化

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查询中返回的任何Node和Relationship对象都将在可视化中呈现 



 



 



 



 



 
。当前不支持路径                             。

Neovis.updateWithCypher(statement)

使用Cypher语句的结果更新当前可视化

   

   

   

   

   

，重新指定当前节点




    




    




    




    




    




 。Cypher查询中返回的任何Node和Relationship对象都将在可视化中呈现

























。当前不支持路径                              。此函数不会更改renderWithCypher或初始密码给出的原始查询



     



     



     



     



     



 。

config

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

一个配置对象     

     

     

     

     

    ，它定义：

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

更多配置内容可进入github查看  




  




  




  




  




  


，或阅读源码

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

问题：

        1.刚开始使用一直加载不出来节点数据


  


  


  


  


  


，是因为 initial_cypher 赋值的查询代码写错了

        2.查询出来节点没有关系线段连接     
     
     
     
     
   ，是因为initial_cypher 查询语句只查询了节点 没有把关系查询出来   




   




   




   




   




   

，如下代码



 



 



 



 



 



，使用身份证号 把“当前员工     


     


     


     


     


     ”和当前员工的“员工属性 




 




 




 




 




 



”节点以及节点关系查询出来(根据自己的数据库内容条件查询数据)

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