devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

利用Spring boot、neo4j、echarts可视化雪中悍刀行

作者：盐析白兔 | 2024-07-30 15:16:10

赞

踩

利用Spring boot、neo4j、echarts可视化雪中悍刀行

效果如下：

搜索李淳罡：

 

添加节点和关系，在这里添加李淳罡-喜欢-绿袍，如下多出李淳罡和绿袍的关系和绿袍的节点

 

在neo4j中，存储如下图

SDN似乎无法任意存储关系，故在这里使用的neo4j-java-driver完成的以上功能：

[neo4jConfig.java]

加载驱动和提供session

  1. package com.sandalen.water.config;
  2.  
  3. import com.sandalen.water.PropertiesClass.Neo4jProperties;
  4. import org.neo4j.driver.v1.AuthTokens;
  5. import org.neo4j.driver.v1.Driver;
  6. import org.neo4j.driver.v1.GraphDatabase;
  7. import org.neo4j.driver.v1.Session;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.context.annotation.Bean;
  10. import org.springframework.context.annotation.Configuration;
  11.  
  12. @Configuration
  13. public class Neo4jConfig {
  14.     @Autowired
  15.     private Neo4jProperties neo4jProperties;
  16.  
  17.     @Bean(name="NeoSession")
  18.     public Session initDriver(){
  19.         Session session = null;
  20.         try
  21.         {
  22.             Driver driver = GraphDatabase.driver(neo4jProperties.getURI(), AuthTokens.basic(neo4jProperties.getUsername(), neo4jProperties.getPassword()));
  23.             session = driver.session();
  24.             return session;
  25.         }
  26.         catch (Exception e){
  27.             e.printStackTrace();
  28.             return session;
  29.         }
  30.  
  31.     }
  32. }

 [CypherUtils.java]

这里主要定义了一些cypher语句

  1. package com.sandalen.water.other;
  2.  
  3. import org.springframework.stereotype.Component;
  4.  
  5.  
  6. @Component
  7. public class CypherUtils {
  8.     
  9.  
  10.     public static String createSingle(String entity){
  11.         return "merge (m:Person{name:\""+entity+"\"}) return m";
  12.     }
  13.  
  14.     public static String createRelationByTwoNodes(String entityFrom,String relation,String entityTo){
  15.         return "match(m:Person{name:\""+entityFrom+"\"}),(n:Person{name:\""+entityTo+"\"}) merge (m)-[r:"+relation+"]->(n) return m,n,r";
  16.     }
  17.  
  18.     public static String searchAll(String entityName){
  19.         if(entityName == "" || entityName == null){
  20.             return "match (m)-[edge]->(n) return m,edge,n";
  21.         }
  22.  
  23.         return "match (m)-[edge]-(n) where n.name='" + entityName + "' return m,edge,n";
  24.     }
  25.     
  26.  
  27. }

[Neo4jUtils.java]

添加、查找关系和节点的逻辑实现，其中添加的逻辑是先查询输入的两个实体，若任意实体不存在则先创建，再根据这两个节点添加关系。

查找的逻辑很简单，不再赘述。

  1. package com.sandalen.water.util;
  2.  
  3.  
  4. import com.sandalen.water.other.CypherUtils;
  5. import org.neo4j.driver.v1.*;
  6. import org.neo4j.driver.v1.types.Relationship;
  7. import org.springframework.beans.factory.annotation.Autowired;
  8. import org.springframework.stereotype.Component;
  9.  
  10. import java.util.*;
  11.  
  12. @Component
  13. public class Neo4jUtils {
  14.     private static Session session;
  15.  
  16.     @Autowired
  17.     public Neo4jUtils(Session NeoSession){
  18.         Neo4jUtils.session= NeoSession;
  19.     }
  20.  
  21.     public static boolean create(String entityFrom,String relation,String entityTo){
  22.         try {
  23.             StatementResult statementResult = session.run(CypherUtils.createSingle(entityFrom));
  24.             List<Record> entityFromlist = statementResult.list();
  25.  
  26.             StatementResult entityToResult = session.run(CypherUtils.createSingle(entityTo));
  27.             List<Record> entityToList = entityToResult.list();
  28.  
  29.             if(entityFromlist.size() == 0){
  30.                 session.run(CypherUtils.createSingle(entityFrom));
  31.             }
  32.  
  33.             if(entityToList.size() == 0){
  34.                 session.run(CypherUtils.createSingle(entityTo));
  35.             }
  36.  
  37.             StatementResult result = session.run(CypherUtils.createRelationByTwoNodes(entityFrom, relation, entityTo));
  38.             return true;
  39.         }
  40.         catch (Exception e){
  41.             e.printStackTrace();
  42.             return false;
  43.         }
  44.  
  45.     }
  46.  
  47.     public static Map<String,Object> searchAll(String entityName){
  48.         StatementResult result = session.run(CypherUtils.searchAll(entityName));
  49.         List<Record> list = result.list();
  50.  
  51.         Map<String,Object> resultMap = new HashMap<>();
  52.  
  53.         Set<String> nodes = new HashSet<>();
  54.         List<String> relationships = new ArrayList<>();
  55.         for (Record r : list){
  56.             String start_node = r.get("m").get("name").toString().replace("\"","");
  57.             String relationship = r.get("edge").asRelationship().type().replace("\"","");
  58.             String end_node = r.get("n").get("name").toString().replace("\"","");
  59.  
  60. //            System.out.println(start_node + "-" + relationship + "->" + end_node );
  61.             relationship = start_node + "-" + relationship + "-" + end_node;
  62.             nodes.add(start_node);
  63.             nodes.add(end_node);
  64.             relationships.add(relationship);
  65.  
  66.         }
  67.  
  68.  
  69.         resultMap.put("nodes",nodes);
  70.         resultMap.put("relationships",relationships);
  71.  
  72.         return resultMap;
  73.     }
  74.  
  75. }

[controller]

  1. package com.sandalen.water.controller;
  2.  
  3. import com.sandalen.water.bean.RespBean;
  4. import com.sandalen.water.service.KgService;
  5. import com.sandalen.water.util.Neo4jUtils;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RestController;
  9.  
  10. import java.util.Map;
  11.  
  12. @RequestMapping("/kg")
  13. @RestController
  14. public class KgController {
  15.     @Autowired
  16.     private KgService kgService;
  17.  
  18.     @RequestMapping("/saveEntity")
  19.     public RespBean saveEntity(String entityFrom,String relation,String entityTo){
  20.         boolean isCreated = Neo4jUtils.create(entityFrom, relation, entityTo);
  21.         if(isCreated){
  22.             return RespBean.ok("创建数据成功");
  23.         }
  24.  
  25.         return RespBean.error("创建失败");
  26.  
  27.     }
  28.  
  29.     @RequestMapping("/search")
  30.     public RespBean searchAll(String entityName){
  31.         Map<String, Object> map = Neo4jUtils.searchAll(entityName);
  32.         return RespBean.ok("获取数据成功",map);
  33.     }
  34.  
  35. }

[前端]

前端代码只提供页面的，我使用的是element Ui和vue

  1. <template>
  2.   <div class="kgContainer">
  3.     <div class="alert alert-info" role="alert" style="margin-bottom: 20px;">
  4.       <h1>Prompt</h1>
  5.       <font size="4">输入你想要搜索的知识</font>
  6.     </div>
  7.     <div class="search" style="text-align: center;margin-bottom: 50px;">
  8.       <el-input v-model="entityName" placeholder="请输入内容" style="width: 400px;"></el-input>
  9.       <el-button type="primary" icon="el-icon-search" @click="initData">搜索</el-button>
  10.       <el-input v-model="form.entityFrom" placeholder="请输入内容" style="width: 100px;"></el-input>
  11.       <el-input v-model="form.relation" placeholder="请输入内容" style="width: 100px;"></el-input>
  12.       <el-input v-model="form.entityTo" placeholder="请输入内容" style="width: 100px;"></el-input>
  13.       <el-button type="primary" icon="el-icon-search" @click="add">添加</el-button>
  14.     </div>
  15.     <div class="kgShow" id="kgShow" style="width: 100%;">
  16.  
  17.     </div>
  18.  
  19.     <!--<div class="test" id="tst" style="width: 100%;height: 500px;"></div>-->
  20.   </div>
  21. </template>
  22.  
  23. <script>
  24.   var echarts = require('echarts');
  25.   export default {
  26.     data() {
  27.       return {
  28.         entityName: '',
  29.         option: '',
  30.         form: {
  31.           entityFrom: '',
  32.           relation: '',
  33.           entityTo: ''
  34.         },
  35.         nodes: [],
  36.         relationships: []
  37.       }
  38.     },
  39.     mounted() {
  40.       this.initData()
  41.       this.tst()
  42.     },
  43.     inject: ['reload'],
  44.     methods: {
  45.       initData() {
  46.         this.$store.dispatch('kg/search', this.entityName).then(response => {
  47.           const nodes = response.nodes
  48.           const relationship = response.relationships
  49.           const nodesList = []
  50.           for(let i = 0; i < nodes.length; i++) {
  51.             const tmp = {
  52.               name: nodes[i],
  53.               symbolSize: 50,
  54.               itemStyle: {
  55.                 normal: {
  56.                   show: true,
  57.                 }
  58.               }
  59.             }
  60.             nodesList.push(tmp)
  61.           }
  62.  
  63.           const links = []
  64.           for(let i = 0; i < relationship.length; i++) {
  65.             const relationshipArray = relationship[i].split("-")
  66.             const tmp = {
  67.               source: relationshipArray[0],
  68.               target: relationshipArray[2],
  69.               name: relationshipArray[1]
  70.             }
  71.             links.push(tmp)
  72.           }
  73.  
  74.           const option = {
  75.             title: {
  76.               text: '雪中悍刀行'
  77.             },
  78.             tooltip: {
  79.               formatter: function(x) {
  80.                 return x.data.name;
  81.               }
  82.             },
  83.             animationDurationUpdate: 1500,
  84.             animationEasingUpdate: 'quinticInOut',
  85.             series: [{
  86.               type: 'graph',
  87.               layout: 'force',
  88.               symbolSize: 80,
  89.               roam: true,
  90.               label: {
  91.                 normal: {
  92.                   show: true,
  93.                 }
  94.               },
  95.               edgeSymbol: ['circle', 'arrow'],
  96.               edgeSymbolSize: [4, 10],
  97.               edgeLabel: {
  98.                 normal: {
  99.                   textStyle: {
  100.                     fontSize: 20
  101.                   }
  102.                 }
  103.               },
  104.               force: {
  105.                 repulsion: 3000, //斥力
  106.                 edgeLength: [20, 80] //默认距离
  107.               },
  108.               //            layout:'circular',
  109.               draggable: true,
  110.               lineStyle: {
  111.                 normal: {
  112.                   width: 2,
  113.                   color: '#4b565b',
  114.                   curveness: 0.2,
  115.                   length: 20
  116.                 }
  117.               },
  118.               edgeLabel: {
  119.                 normal: {
  120.                   show: true,
  121.                   formatter: function(x) {
  122.                     return x.data.name;
  123.                   }
  124.                 }
  125.               },
  126.               data: nodesList,
  127.               links: links
  128.             }]
  129.           }
  130.           this.option = option
  131.  
  132.           this.showKg()
  133.         })
  134.       },
  135.       add() {
  136.         this.$store.dispatch('kg/save', this.form).then(response => {
  137.           if(response.status == 200) {
  138.             this.$message({
  139.               message: response.msg,
  140.               type: 'success'
  141.             })
  142.  
  143.             this.reload()
  144.           }
  145.         })
  146.       },
  147.       getInfo(params) {
  148.         alert(params)
  149.       },
  150.       showKg() {
  151.         const kgShow = document.getElementById('kgShow')
  152.         const myChart = echarts.init(kgShow, 'light')
  153.         myChart.setOption(this.option)
  154.  
  155.         let data = myChart._model.option.series[0].data;
  156.         myChart.on("click", (chartParam) => {
  157.           //        console.log(myChart._model)
  158.           //        console.log(chartParam)
  159.           const entityName = data[chartParam.dataIndex].name
  160.           this.entityName = entityName
  161.           this.initData()
  162.         });
  163.  
  164.         myChart.on("mouseover", (chartParam) => {
  165.           console.log(chartParam)
  166.         })
  167.        
  168.       }
  169.     }
  170.   }
  171. </script>
  172.  
  173. <style>
  174.   .kgContainer {
  175.     width: 100%;
  176.     background-color: #FFFFFF;
  177.     padding: 32px;
  178.   }
  179.   
  180.   .kgShow {
  181.     width: 100%;
  182.     height: 500px;
  183.   }
  184. </style>

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/盐析白兔/article/detail/904253
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号