• 05-Nebula Graph 图数据 可视化

    图数据库的可视化

    Nebula本身自带的Studio

    虽然很好用, 但是并不能直接嵌入到业务系统中, 也不能直接给客户用, 所以我找了好多也没有说直接能展示图关系的, 但是我看网上好多都说是基于D3.js就可以做, 但是我是一个后端呀, D3相对复杂, 但是需求刚在眼前还是要做的..

    基于D3开发Nebula的关系可视化

    前端

    前端在网上找到了一个基于React+antd做的一个Demo, 为此我还特意去学习了React+Antd+D3

    这个就可以用于做Nebula的可视化

    于是我把这个代码从Git上拿了下来

    看了一下, 发现大佬写的非常好

    前端需要的数据结构

    1. <Route exact path="/simple-force-chart" component={SimpleForceChart} />
    2. import React from 'react'
    3. import {Row, Col, Card} from 'antd'
    4. import D3SimpleForceChart from '../components/charts/D3SimpleForceChart'
    5.  
    6. class SimpleForceChart extends React.Component {
    7.     render() {
    8.         const data = {
    9.             nodes:[
    10.                 {
    11.                     "i": 0,
    12.                     "name": "test3",
    13.                     "description": "this is desc!",
    14.                     "id": "186415162885763072"
    15.                 },
    16.                 {
    17.                     "i": 1,
    18.                     "name": "test4",
    19.                     "description": "this is desc!",
    20.                     "id": "186415329756147712"
    21.                 },
    22.                 {
    23.                     "i": 2,
    24.                     "name": "test7",
    25.                     "description": "this is desc!",
    26.                     "id": "186420276928757760"
    27.                 },
    28.                 {
    29.                     "i": 3,
    30.                     "name": "test6",
    31.                     "description": "this is desc!",
    32.                     "id": "186417155309998080"
    33.                 }
    34.             ],
    35.             edges:[
    36.                 {
    37.                     "source": 0,
    38.                     "target": 1,
    39.                     "relation": "类-类",
    40.                     "id": "1",
    41.                     "value": 2
    42.                 },
    43.                 {
    44.                     "source": 1,
    45.                     "target": 2,
    46.                     "relation": "类-类",
    47.                     "id": "1",
    48.                     "value": 3
    49.                 },
    50.                 {
    51.                     "source": 1,
    52.                     "target": 3,
    53.                     "relation": "类-类",
    54.                     "id": "1",
    55.                     "value": 3
    56.                 }
    57.             ]
    58.         }
    59.         return (
    60.             <div className="gutter-example simple-force-chart-demo">
    61.                 <Row gutter={10}>
    62.                     <Col className="gutter-row" md={24}>
    63.                         <div className="gutter-box">
    64.                             <Card title="D3 简单力导向图" bordered={false}>
    65.                                 <D3SimpleForceChart data={data}/>
    66.                             </Card>
    67.                         </div>
    68.                     </Col>
    69.                 </Row>
    70.             </div>
    71.         )
    72.     }
    73. }
    74.  
    75. export default SimpleForceChart

    D3渲染

    1. import React from 'react'
    2. import PropTypes from 'prop-types'
    3. import * as d3 from 'd3'
    4.  
    5. class D3SimpleForceChart extends React.Component {
    6.   componentDidMount() {
    7.     // 容器宽度
    8.     const containerWidth = this.chartRef.parentElement.offsetWidth
    9.     // 数据
    10.     const data = this.props.data
    11.     // 外边距
    12.     const margin = { top: 60, right: 60, bottom: 60, left: 60 }
    13.     // 计算宽度
    14.     const width = containerWidth - margin.left - margin.right
    15.     // 固定高度
    16.     const height = 700 - margin.top - margin.bottom
    17.     // this.chartRef 是个啥 看着像SVG标签
    18.     console.log("this.chartRef",this.chartRef)
    19.     console.log("data",this.props.data)
    20.     let chart = d3
    21.       .select(this.chartRef)
    22.       .attr('width', width + margin.left + margin.right)
    23.       .attr('height', height + margin.top + margin.bottom)
    24.     let g = chart
    25.       .append('g')
    26.       .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')') // 设最外包层在总图上的相对位置
    27.     let simulation = d3
    28.       .forceSimulation() // 构建力导向图
    29.       .force('link',
    30.           d3.forceLink()
    31.           .id((d,i) => i)
    32.           .distance(d => d.value * 50)
    33.       )
    34.       .force('charge', d3.forceManyBody())
    35.       .force('center', d3.forceCenter(width / 2, height / 2))
    36.  
    37.     let z = d3.scaleOrdinal(d3.schemeCategory20) // 通用线条的颜色
    38.  
    39.     let link = g
    40.       .append('g') // 画连接线
    41.       .attr('class', 'links')
    42.       .selectAll('line')
    43.       .data(data.edges)
    44.       .enter()
    45.       .append('line')
    46.         // .on('click',function (d,i) {
    47.         //   console.log("click",d,i)
    48.         //   // 连接线条点击事件
    49.     //           调用接口请求属性数据, 但是感觉, 线的话, 太细了, 不容易点击, 考虑点击标题, 或者悬浮到线上
    50.         // })
    51.         // .on('mouseover',function (d, i) {
    52.         //   console.log("mouseover",d,i)
    53.         //    // 线条悬浮事件
    54.         //   //  被文字遮盖了一部份, 还是考虑点击文字
    55.         // })
    56.  
    57.     // 画连接连上面的关系文字
    58.     let linkText = g
    59.       .append('g')
    60.       .attr('class', 'link-text')
    61.       .selectAll('text')
    62.       .data(data.edges)
    63.       .enter()
    64.       .append('text')
    65.       .text(d => d.relation)
    66.       .on('click',function (d,i) {
    67.         // 线上标题文本的点击事件
    68.         // 可以在这里做请求接口然后 获取属性展示
    69.         // 取d.id即可
    70.           console.log("clicktitle",d,i)
    71.         })
    72.         .style("fill-opacity",1)
    73.     let node = g
    74.       .append('g') // 画圆圈和文字
    75.       .attr('class', 'nodes')
    76.       .selectAll('g')
    77.       .data(data.nodes)
    78.       .enter()
    79.       .append('g')
    80.       // 这个是悬浮节点展示线路的标签 感觉听炫酷的
    81.       // .on('mouseover', function(d, i) {
    82.       //   //显示连接线上的文字
    83.       //   linkText.style('fill-opacity', function(edge) {
    84.       //     if (edge.source === d || edge.target === d) {
    85.       //       return 1
    86.       //     }
    87.       //   })
    88.       //   //连接线加粗
    89.       //   link
    90.       //     .style('stroke-width', function(edge) {
    91.       //       if (edge.source === d || edge.target === d) {
    92.       //         return '2px'
    93.       //       }
    94.       //     })
    95.       //     .style('stroke', function(edge) {
    96.       //       if (edge.source === d || edge.target === d) {
    97.       //         return '#000'
    98.       //       }
    99.       //     })
    100.       // })
    101.       // .on('mouseout', function(d, i) {
    102.       //   //隐去连接线上的文字
    103.       //   linkText.style('fill-opacity', function(edge) {
    104.       //     if (edge.source === d || edge.target === d) {
    105.       //       return 0
    106.       //     }
    107.       //   })
    108.       //   //连接线减粗
    109.       //   link
    110.       //     .style('stroke-width', function(edge) {
    111.       //       if (edge.source === d || edge.target === d) {
    112.       //         return '1px'
    113.       //       }
    114.       //     })
    115.       //     .style('stroke', function(edge) {
    116.       //       if (edge.source === d || edge.target === d) {
    117.       //         return '#ddd'
    118.       //       }
    119.       //     })
    120.       // })
    121.         .on('click', function (d,i){
    122.           console.log(d,i)
    123.           // d是数据 i 是索引
    124.           // 在这里可以做点击事件, 请求后端接口 返回属性数据, 然后渲染
    125.         })
    126.       .call(
    127.         d3.drag()
    128.         .on('start', dragstarted)
    129.         .on('drag', dragged)
    130.         .on('end', dragended)
    131.       )
    132.  
    133.     node.append('circle')
    134.         .attr('r', 5)
    135.         .attr('fill', (d,i) => z(i))
    136.  
    137.     node.append('text')
    138.       .attr('fill', (d,i) => z(i))
    139.       .attr('y', -20)
    140.       .attr('dy', '.71em')
    141.       .text(d => d.name)
    142.  
    143.     // 初始化力导向图
    144.     simulation.nodes(data.nodes)
    145.               .on('tick', ticked)
    146.  
    147.     simulation.force('link')
    148.               .links(data.edges)
    149.  
    150.     chart.append('g') // 输出标题
    151.       .attr('class', 'bar--title')
    152.       .append('text')
    153.       .attr('fill', '#000')
    154.       .attr('font-size', '16px')
    155.       .attr('font-weight', '700')
    156.       .attr('text-anchor', 'middle')
    157.       .attr('x', containerWidth / 2)
    158.       .attr('y', 20)
    159.       .text('人物关系图')
    160.  
    161.     function ticked() {
    162.       // 力导向图变化函数，让力学图不断更新
    163.       link
    164.         .attr('x1', function(d) {
    165.           return d.source.x
    166.         })
    167.         .attr('y1', function(d) {
    168.           return d.source.y
    169.         })
    170.         .attr('x2', function(d) {
    171.           return d.target.x
    172.         })
    173.         .attr('y2', function(d) {
    174.           return d.target.y
    175.         })
    176.       linkText
    177.         .attr('x', function(d) {
    178.           return (d.source.x + d.target.x) / 2
    179.         })
    180.         .attr('y', function(d) {
    181.           return (d.source.y + d.target.y) / 2
    182.         })
    183.       node.attr('transform', function(d) {
    184.         return 'translate(' + d.x + ',' + d.y + ')'
    185.       })
    186.     }
    187.  
    188.     function dragstarted(d) {
    189.       if (!d3.event.active) {
    190.         simulation.alphaTarget(0.3).restart()
    191.       }
    192.       d.fx = d.x
    193.       d.fy = d.y
    194.     }
    195.  
    196.     function dragged(d) {
    197.       d.fx = d3.event.x
    198.       d.fy = d3.event.y
    199.     }
    200.  
    201.     function dragended(d) {
    202.       if (!d3.event.active) {
    203.         simulation.alphaTarget(0)
    204.       }
    205.       d.fx = null
    206.       d.fy = null
    207.     }
    208.   }
    209.   render() {
    210.     return (
    211.       <div className="force-chart--simple">
    212.         <svg ref={r => (this.chartRef = r)} />
    213.       </div>
    214.     )
    215.   }
    216. }
    217. D3SimpleForceChart.propTypes = {
    218.   data: PropTypes.shape({
    219.     nodes: PropTypes.arrayOf(
    220.       PropTypes.shape({
    221.         name: PropTypes.string.isRequired
    222.         // href:PropTypes.string.isRequired,
    223.       }).isRequired
    224.     ).isRequired,
    225.     edges: PropTypes.arrayOf(
    226.       PropTypes.shape({
    227.         source: PropTypes.number.isRequired,
    228.         target: PropTypes.number.isRequired,
    229.         relation: PropTypes.string.isRequired
    230.       }).isRequired
    231.     ).isRequired
    232.   }).isRequired
    233. }
    234.  
    235. export default D3SimpleForceChart

    虽然代码看不懂, 但是并不影响我完成功能, 我在样式上面对原有的做了一些改变

    后端

    做数据结构转化, 转为D3需要的数据结构

    虽然我前端不咋地, 但是后端我行呀

    MATCH p=(v:test3)-[*2]->() where id(v) == '186344099868655616' return [n in nodes(p) | properties(n)] as node,[x in relationships(p) | properties(x)] as rela

    这个是查询test3 id=186344099868655616 近2跳的数据, 我在语法上做了一些处理

    本来是直接返回路径变量p的, 但是居然直接报错了

    Nebula自身提供的Jar包解析不了, 自己的返回结果, 当时差点绝望了, 还不底层的调用全部都封装了起来...

    最重只能在语法上进行处理, 通过两个函数和管道符循环,来完成, 但是会吧节点和关系拆开, 拆成两个列.., 不过也算是能返回结果了

    然后在程序里面处理, 转为D3需要的数据结构

    导入需要的模型类

    1. package com.jd.knowledgeextractionplatform.nebulagraph.model;
    2.  
    3. import lombok.Data;
    4.  
    5. import java.util.List;
    6.  
    7. @Data
    8. public class PathPar {
    9.     private List node;
    10.     private List rela;
    11. }
    

    1. package com.jd.knowledgeextractionplatform.nebulagraph.model;
    2.  
    3. import lombok.Data;
    4. import lombok.EqualsAndHashCode;
    5.  
    6. @Data
    7. public class Node {
    8.     private Integer i;
    9.     private String name;
    10.     private String description;
    11.     private String id;
    12.  
    13.     public boolean equals(Node node) {
    14.         return this.id.equals(node.id);
    15.     }
    16. }
    

    1. package com.jd.knowledgeextractionplatform.nebulagraph.d3model;
    2.  
    3. import lombok.AllArgsConstructor;
    4. import lombok.Data;
    5. import lombok.NoArgsConstructor;
    6.  
    7. @Data
    8. @AllArgsConstructor
    9. @NoArgsConstructor
    10. public class Edges {
    11.     private Integer source;
    12.     private Integer target;
    13.     private String relation;
    14.     private String id;
    15.     private Integer value;
    16. }
    

    1. package com.jd.knowledgeextractionplatform.nebulagraph.d3model;
    2.  
    3. import com.jd.knowledgeextractionplatform.nebulagraph.model.Node;
    4. import lombok.Data;
    5.  
    6. import java.util.List;
    7. import java.util.Set;
    8.  
    9. @Data
    10. public class D3Model {
    11.     private List nodes;
    12.     private List edges;
    13. }
    

    1. package com.jd.knowledgeextractionplatform.service.impl;
    2.  
    3. import com.alibaba.fastjson.JSONArray;
    4. import com.alibaba.fastjson.JSONObject;
    5. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
    6. import com.jd.knowledgeextractionplatform.common.CommonResult;
    7. import com.jd.knowledgeextractionplatform.mapper.ClassAndAttrMapper;
    8. import com.jd.knowledgeextractionplatform.nebulagraph.d3model.D3Model;
    9. import com.jd.knowledgeextractionplatform.nebulagraph.d3model.Edges;
    10. import com.jd.knowledgeextractionplatform.nebulagraph.d3model.SE;
    11. import com.jd.knowledgeextractionplatform.nebulagraph.model.Node;
    12. import com.jd.knowledgeextractionplatform.nebulagraph.model.PathPar;
    13. import com.jd.knowledgeextractionplatform.nebulagraph.model.Rela;
    14. import com.jd.knowledgeextractionplatform.nebulagraph.template.NebulaTemplate;
    15. import com.jd.knowledgeextractionplatform.pojo.ClassAndAttr;
    16. import com.jd.knowledgeextractionplatform.service.SearchService;
    17. import lombok.extern.slf4j.Slf4j;
    18. import org.springframework.beans.BeanUtils;
    19. import org.springframework.beans.factory.annotation.Autowired;
    20. import org.springframework.stereotype.Service;
    21.  
    22. import java.util.ArrayList;
    23. import java.util.List;
    24.  
    25. @Service
    26. @Slf4j
    27. public class SearchServiceImpl implements SearchService {
    28.  
    29.     @Autowired
    30.     private NebulaTemplate nebulaTemplate;
    31.  
    32.     @Autowired
    33.     private ClassAndAttrMapper classAndAttrMapper;
    34.  
    35.     @Override
    36.     public CommonResult search(Long projectId, String name, Integer skip) {
    37.         LambdaQueryWrapper<ClassAndAttr> lambdaQueryWrapper = new LambdaQueryWrapper<>();
    38.         lambdaQueryWrapper.eq(ClassAndAttr::getProjectId, projectId);
    39.         lambdaQueryWrapper.eq(ClassAndAttr::getName, name);
    40.         lambdaQueryWrapper.eq(ClassAndAttr::getType, 1);
    41.         lambdaQueryWrapper.eq(ClassAndAttr::getDeleted, 0);
    42.         ClassAndAttr classAndAttrs = classAndAttrMapper.selectOne(lambdaQueryWrapper);
    43.         String match = "MATCH p=(v:%s)-[*%s]->() where id(v) == '%s' return [n in nodes(p) | properties(n)] as node,[x in relationships(p) | properties(x)] as rela";
    44.         String matchSql = String.format(match, classAndAttrs.getCode(), skip, classAndAttrs.getId());
    45.         log.info("search sql : {}", matchSql);
    46.         JSONObject resultSet = nebulaTemplate.executeJson(matchSql);
    47.         String datas = resultSet.getString("data");
    48.         List<PathPar> pathPars = JSONArray.parseArray(datas, PathPar.class);
    49.         D3Model d3Model = pathParsConvertToD3Model(pathPars);
    50.         return CommonResult.success("查询成功", d3Model);
    51.  
    52.     }
    53.  
    54.     private D3Model pathParsConvertToD3Model(List<PathPar> pathPars) {
    55.         D3Model d3Model = new D3Model();
    56.         d3Model.setNodes(new ArrayList<>());
    57.         d3Model.setEdges(new ArrayList<>());
    58.         int i = -1;
    59.         for (PathPar pathPar : pathPars) {
    60.             List<Node> nodes = pathPar.getNode();
    61.             List<Rela> relas = pathPar.getRela();
    62.             int jul = 2;
    63.             for (int i1 = 0; i1 < nodes.size() - 1; i1++) {
    64.                 Node node = nodes.get(i1);
    65.                 Node node2 = nodes.get(i1 + 1);
    66.                 Node fir = null;
    67.                 Node sed = null;
    68.                 for (Node d3ModelNode : d3Model.getNodes()) {
    69.                     boolean equals = d3ModelNode.getId().equals(node.getId());
    70.                     if (equals) {
    71.                         fir = d3ModelNode;
    72.                     }
    73.                     boolean equals2 = d3ModelNode.getId().equals(node2.getId());
    74.                     if (equals2) {
    75.                         sed = d3ModelNode;
    76.                         break;
    77.                     }
    78.                 }
    79.                 if (null == fir) {
    80.                     i = i + 1;
    81.                     fir = new Node();
    82.                     BeanUtils.copyProperties(node, fir);
    83.                     fir.setI(i);
    84.                     d3Model.getNodes().add(fir);
    85.                 }
    86.                 if (null == sed) {
    87.                     i = i + 1;
    88.                     sed = new Node();
    89.                     BeanUtils.copyProperties(node2, sed);
    90.                     sed.setI(i);
    91.                     d3Model.getNodes().add(sed);
    92.                 }
    93.                 Rela rela = relas.get(i1);
    94.                 List<Edges> edges1 = d3Model.getEdges();
    95.                 Edges edges = new Edges(fir.getI(), sed.getI(), rela.getName(), rela.getId(), jul);
    96.                 boolean flag = true;
    97.                 for (Edges edges2 : edges1) {
    98.                     if (edges2.getSource().equals(edges.getSource()) && edges2.getTarget().equals(edges.getTarget())) {
    99.                         flag = false;
    100.                         break;
    101.                     }
    102.                 }
    103.                 if (flag) {
    104.                     d3Model.getEdges().add(edges);
    105.                 }
    106.                 jul++;
    107.             }
    108.         }
    109. //        List<Node> collect = d3Model.getNodes().stream().sorted((x, y) -> {
    110. //            if (x.getI() < y.getI()) {
    111. //                return 1;
    112. //            } else if (x.getI() > y.getI()) {
    113. //                return -1;
    114. //            }
    115. //            return 0;
    116. //        }).collect(Collectors.toList());
    117. //        d3Model.setNodes(collect);
    118.         // 获取到所有的自环边
    119.         List<Node> nodes = d3Model.getNodes();
    120.         List<Edges> edges = d3Model.getEdges();
    121.         List<SE> indexs = new ArrayList<>();
    122.         for (int i1 = 0; i1 < nodes.size(); i1++) {
    123.             Node node = nodes.get(i1);
    124.             String id = node.getId();
    125.             for (int i2 = i1+1; i2 <= nodes.size() - 1; i2++) {
    126.                 Node node2 = nodes.get(i2);
    127.                 String id2 = node2.getId();
    128.                 if (id.equals(id2)) {
    129.                     // 存在重复, 自环数据
    130.                     SE se = new SE();
    131.                     se.setS(node.getI());
    132.                     se.setE(node2.getI());
    133.                     indexs.add(se);
    134.                 }
    135.             }
    136.         }
    137.         // 解决图数据库存在自环边的问题 必须倒序遍历, 不然会造成数据越界问题
    138.         for (int i1 = indexs.size()-1; i1 >= 0 ; i1--) {
    139.             SE index = indexs.get(i1);
    140.             Integer s = index.getS();
    141.             Integer e = index.getE();
    142.             // 删除重复的节点
    143.             nodes.remove(e.intValue());
    144.             for (Edges edge : edges) {
    145.                 Integer source = edge.getSource();
    146.                 Integer target = edge.getTarget();
    147.                 if(source.equals(e)){
    148.                     // 将e 设置为 s
    149.                     edge.setSource(s);
    150.                 }
    151.                 if(target.equals(e)){
    152.                     // 将e 设置为 s
    153.                     edge.setTarget(s);
    154.                 }
    155.             }
    156.         }
    157.         // 处理后面的数据全部前移
    158.         for (int i1 = 0; i1 < nodes.size(); i1++) {
    159.             Node node = nodes.get(i1);
    160.             if(!node.getI().equals(i1)){
    161.                 // 如果不一样
    162.                 Integer i2 = node.getI();
    163.                 // 设置为当前的I
    164.                 node.setI(i1);
    165.                 // 循环遍历边
    166.                 for (Edges edge : edges) {
    167.                     Integer source = edge.getSource();
    168.                     Integer target = edge.getTarget();
    169.                     if(source.equals(i2)){
    170.                         // 将e 设置为 s
    171.                         edge.setSource(i1);
    172.                     }
    173.                     if(target.equals(i2)){
    174.                         // 将e 设置为 s
    175.                         edge.setTarget(i1);
    176.                     }
    177.                 }
    178.             }
    179.         }
    180.         // 获取到所有的重复点位
    181.         return d3Model;
    182.     }
    183.  
    184.  
    185. }

    给大家看一个 我执行返回的结果

    1. {
    2.     "code": 200,
    3.     "msg": "查询成功",
    4.     "data": {
    5.         "nodes": [
    6.             {
    7.                 "i": 0,
    8.                 "name": "test3",
    9.                 "description": "this is desc!",
    10.                 "id": "186415162885763072"
    11.             },
    12.             {
    13.                 "i": 1,
    14.                 "name": "test4",
    15.                 "description": "this is desc!",
    16.                 "id": "186415329756147712"
    17.             },
    18.             {
    19.                 "i": 2,
    20.                 "name": "test7",
    21.                 "description": "this is desc!",
    22.                 "id": "186420276928757760"
    23.             },
    24.             {
    25.                 "i": 3,
    26.                 "name": "test6",
    27.                 "description": "this is desc!",
    28.                 "id": "186417155309998080"
    29.             }
    30.         ],
    31.         "edges": [
    32.             {
    33.                 "source": 0,
    34.                 "target": 1,
    35.                 "relation": "类-类",
    36.                 "id": "1",
    37.                 "value": 2
    38.             },
    39.             {
    40.                 "source": 1,
    41.                 "target": 2,
    42.                 "relation": "类-类",
    43.                 "id": "1",
    44.                 "value": 3
    45.             },
    46.             {
    47.                 "source": 1,
    48.                 "target": 3,
    49.                 "relation": "类-类",
    50.                 "id": "1",
    51.                 "value": 3
    52.             }
    53.         ]
    54.     }
    55. }

    解决了自环和双向的问题

    这就是上面前端需要的数据结构

    把这个数据直接放入前端的静态数据里面就能展示了

    到此, 基于D3的图可视化完成, 当然了, 样式不是很好看, 前端大佬自行美化吧~

  • 相关阅读:
    PhpSpreadsheet设置单元格常用操作汇总
    浅浅懂了一些transformer中的self-attation
    C\C++中数组指针和二维数组最强最简单粗暴深刻理解！！！一遍包过！
    文件包含漏洞学习小结
    重定向：基于神经网络优化的方法
    如何做一个无符号数识别程序
    多项目并行管理：优化协调策略提高效率
    【LeetCode高频100题-2】冲冲冲
    05-分布式计算框架
    rust字面量
  • 原文地址：https://blog.csdn.net/flowerStream/article/details/126487933