【组件封装】基于neo4jD3封装关系图、关联图谱

清疚 2023-09-27 09:42 120阅读 0赞

**目录**

前言

效果图：

使用

第一步

第二步

目录结构

组件代码：

--------------------

#### 前言 ####

> 有时在开发中用过的一些比较好的功能没有及时封装，导致日后再用的时候还得再来一遍，现在是想将这些功能封装成组件，做到“”拿来即用“”，为了更好地照顾到版本兼容，我直接将资源下载到本地作为静态资源使用，这个组件基于vue2,如果你是个新手不会将之转为vue3或者react等框架，可以留言，我看到后会更新，这里默认大家具有一定经验。
> 
> --------------------
> 
> 这个组件的好处：相比于直接使用D3或者echarts，他的优点在于有大量已经内置的功能，且可以通过修改源码方式轻松定制，而不必从0开始写。具体更多的使用方式可以参考文档：
> 
> [https://github.com/eisman/neo4jd3][https_github.com_eisman_neo4jd3]

--------------------

#### 效果图： ####

![092792c14422496db5b217c8380e7ce6.png][]

--------------------

好了，言归正传，接下来的步骤是具体封装为全局组件。你如果跟着我的步骤使用，我确保你100%可以成功。

--------------------

### 使用 ###

--------------------

#### **第一步** ####

> public文件夹中， 将以下：
> 
> 一个css文件放入static下的css中；
> 
> 两个js文件放入static下的js文件中。

![c2897e8075eb4015b70c759562ff1ac3.png][]

依赖源码：我去字数太多，发不出来，大家请自行下载吧。

neo4jd3.css:[https://github.com/eisman/neo4jd3][https_github.com_eisman_neo4jd3]

--------------------

d3.min.js:[https://github.com/eisman/neo4jd3][https_github.com_eisman_neo4jd3]

--------------------

neo4jd3.js :[https://github.com/eisman/neo4jd3][https_github.com_eisman_neo4jd3]

--------------------

#### 第二步  ####

> components文件夹下新建Neo4jD3文件夹，新建index.vue文件，复制以下代码粘贴过去，然后再index.js里注册全局组件
> 
> 类似这样：
> 
> ![3936c5d1a7a94735bec34e80cdc9acad.png][]
> 
> main.js 里面引入vue.use一下即可

--------------------

#### 目录结构 ####

![41be682d037844fdb7477caefe9bea3c.png][]

--------------------

#### 组件代码： ####

<template>
      <div>
        <div id="neo4jd3"></div>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        Neo4jD3JsonList: Object
      },
      data () {
        return {
          nodeData: {
            "results": [{
              "columns": ["user", "entity"],
              "data": [{
                "graph": {
                  "nodes": [{
                    "id": "1",
                    "labels": ["User"],
                    "properties": {
                      "userId": "eisman"
                    }
                  }, {
                    "id": "2",
                    "labels": ["Phone"],
                    "properties": {
                      "value": "555-555-5555"
                    }
                  }, {
                    "id": "3",
                    "labels": ["Address"],
                    "properties": {
                      "zipCode": "90210",
                      "country": "US",
                      "city": "Beverly Hills",
                      "state": "CA"
                    }
                  }, {
                    "id": "4",
                    "labels": ["BirthDate"],
                    "properties": {
                      "value": 1326322800000
                    }
                  }, {
                    "id": "5",
                    "labels": ["Password"],
                    "properties": {
                      "value": "123456"
                    }
                  }, {
                    "id": "6",
                    "labels": ["Device"],
                    "properties": {
                      "value": "eisman"
                    }
                  }, {
                    "id": "7",
                    "labels": ["SecurityChallengeAnswer"],
                    "properties": {
                      "value": "hCxh4LItmWefWg71JiYUaxxFrCRaqQIDEoEbeqHa"
                    }
                  }, {
                    "id": "8",
                    "labels": ["Project"],
                    "properties": {
                      "name": "neo4jd3",
                      "title": "neo4jd3.js",
                      "description": "Neo4j graph visualization using D3.js.",
                      "url": "https://eisman.github.io/neo4jd3"
                    }
                  }, {
                    "id": "9",
                    "labels": ["Git"],
                    "properties": {
                      "url": "https://github.com/eisman/neo4jd3"
                    }
                  }, {
                    "id": "10",
                    "labels": ["Issues"],
                    "properties": {
                      "url": "https://github.com/eisman/neo4jd3/issues"
                    }
                  }, {
                    "id": "11",
                    "labels": ["Github"],
                    "properties": {
                      "url": "https://github.com"
                    }
                  }, {
                    "id": "12",
                    "labels": ["Project"],
                    "properties": {
                      "name": "neo4j",
                      "title": "Neo4j",
                      "description": "Graphs for Everyone",
                      "url": "http://neo4j.com"
                    }
                  }, {
                    "id": "13",
                    "labels": ["Project"],
                    "properties": {
                      "name": "d3",
                      "title": "D3.js",
                      "description": "Bring data to life with SVG, Canvas and HTML.",
                      "url": "https://d3js.org/"
                    }
                  }, {
                    "id": "14",
                    "labels": ["Email"],
                    "properties": {
                      "email": "eeisman@gmail.com"
                    }
                  }, {
                    "id": "15",
                    "labels": ["CreditCard"],
                    "properties": {
                      "number": "4916928406205705",
                      "type": "visa"
                    }
                  }, {
                    "id": "16",
                    "labels": ["Options"],
                    "properties": {}
                  }, {
                    "id": "17",
                    "labels": ["Language"],
                    "properties": {
                      "lang": "en_us"
                    }
                  }, {
                    "id": "18",
                    "labels": ["Cookie"],
                    "properties": {
                      "value": "itgnxe0xmvb1tazaqmkpmfzg8m3ma62qskfwcexc"
                    }
                  }, {
                    "id": "19",
                    "labels": ["Ip"],
                    "properties": {
                      "address": "127.0.0.1"
                    }
                  }, {
                    "id": "20",
                    "labels": ["icons"],
                    "properties": {
                      "description": "Map node labels to Font Awesome icons",
                      "type": "object",
                      "example": {
                        "Address": "home",
                        "BirthDate": "birthday-cake",
                        "Password": "asterisk",
                        "Phone": "phone",
                        "User": "user"
                      },
                      "deafult": "{}"
                    }
                  }, {
                    "id": "21",
                    "labels": ["zoomIn"],
                    "properties": {
                      "description": "Scroll up to zoom in.",
                      "type": "function"
                    }
                  }, {
                    "id": "22",
                    "labels": ["zoomOut"],
                    "properties": {
                      "description": "Scroll down to zoom out.",
                      "type": "function"
                    }
                  }, {
                    "id": "23",
                    "labels": ["zoomFit"],
                    "properties": {
                      "description": "Adjust the graph to the container once it has been loaded.",
                      "type": "boolean",
                      "values": [true, false],
                      "default": false
                    }
                  }, {
                    "id": "24",
                    "labels": ["Api"],
                    "properties": {}
                  }, {
                    "id": "25",
                    "labels": ["Google"],
                    "properties": {
                      "url": "https://www.google.com/#q=\"neo4jd3\""
                    }
                  }],
                  "relationships": [{
                    "id": "1",
                    "type": "HAS_PHONE_NUMBER",
                    "startNode": "1",
                    "endNode": "2",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "2",
                    "type": "HAS_ADDRESS",
                    "startNode": "1",
                    "endNode": "3",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "3",
                    "type": "HAS_BIRTH_DATE",
                    "startNode": "1",
                    "endNode": "4",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "4",
                    "type": "HAS_PASSWORD",
                    "startNode": "1",
                    "endNode": "5",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "5",
                    "type": "USED_DEVICE",
                    "startNode": "1",
                    "endNode": "6",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "6",
                    "type": "HAS_SECURITY_ANSWER",
                    "startNode": "1",
                    "endNode": "7",
                    "properties": {
                      "from": 1473581532586
                    }
                  }, {
                    "id": "7",
                    "type": "DEVELOPES",
                    "startNode": "1",
                    "endNode": "8",
                    "properties": {
                      "from": 1470002400000
                    }
                  }, {
                    "id": "8",
                    "type": "REPOSITORY",
                    "startNode": "8",
                    "endNode": "9",
                    "properties": {}
                  }, {
                    "id": "9",
                    "type": "ISSUES",
                    "startNode": "8",
                    "endNode": "10",
                    "properties": {}
                  }, {
                    "id": "10",
                    "type": "HOSTED_ON",
                    "startNode": "8",
                    "endNode": "11",
                    "properties": {}
                  }, {
                    "id": "11",
                    "type": "HOSTED_ON",
                    "startNode": "12",
                    "endNode": "11",
                    "properties": {}
                  }, {
                    "id": "12",
                    "type": "HOSTED_ON",
                    "startNode": "13",
                    "endNode": "11",
                    "properties": {}
                  }, {
                    "id": "13",
                    "type": "HAS_EMAIL",
                    "startNode": "1",
                    "endNode": "14",
                    "properties": {}
                  }, {
                    "id": "14",
                    "type": "USED_CREDIT_CARD",
                    "startNode": "1",
                    "endNode": "15",
                    "properties": {}
                  }, {
                    "id": "15",
                    "type": "DEPENDS_ON",
                    "startNode": "8",
                    "endNode": "12",
                    "properties": {}
                  }, {
                    "id": "16",
                    "type": "DEPENDS_ON",
                    "startNode": "8",
                    "endNode": "13",
                    "properties": {}
                  }, {
                    "id": "17",
                    "type": "OPTIONS",
                    "startNode": "8",
                    "endNode": "16",
                    "properties": {}
                  }, {
                    "id": "18",
                    "type": "HAS_LANGUAGE",
                    "startNode": "6",
                    "endNode": "17",
                    "properties": {}
                  }, {
                    "id": "19",
                    "type": "HAS_COOKIE",
                    "startNode": "6",
                    "endNode": "18",
                    "properties": {}
                  }, {
                    "id": "20",
                    "type": "HAS_IP",
                    "startNode": "6",
                    "endNode": "19",
                    "properties": {}
                  }, {
                    "id": "21",
                    "type": "ICONS",
                    "startNode": "16",
                    "endNode": "20",
                    "properties": {}
                  }, {
                    "id": "22",
                    "type": "ZOOM_IN",
                    "startNode": "24",
                    "endNode": "21",
                    "properties": {}
                  }, {
                    "id": "23",
                    "type": "ZOOM_OUT",
                    "startNode": "24",
                    "endNode": "22",
                    "properties": {}
                  }, {
                    "id": "24",
                    "type": "ZOOM_FIT",
                    "startNode": "16",
                    "endNode": "23",
                    "properties": {}
                  }, {
                    "id": "25",
                    "type": "API",
                    "startNode": "8",
                    "endNode": "24",
                    "properties": {}
                  }, {
                    "id": "26",
                    "type": "GOOGLE_SEARCH",
                    "startNode": "8",
                    "endNode": "25",
                    "properties": {}
                  }]
                }
              }]
            }],
            "errors": []
          },
          node: [],
          relationships: []
        }
      },
      methods: {
    
        init () {
          console.log("chufa  init  触发……")
          let _that = this
          var neo4jd3 = new Neo4jd3('#neo4jd3', {
            highlight: [{
              class: 'Project',
              property: 'name',
              value: 'neo4jd3'
            }, {
              class: 'User',
              property: 'userId',
              value: 'eisman'
            }],
            icons: {
              //                        'Address': 'home',
              'Api': 'gear',
              //                        'BirthDate': 'birthday-cake',
              'Cookie': 'paw',
              //                        'CreditCard': 'credit-card',
              //                        'Device': 'laptop',
              'Email': 'at',
              'Git': 'git',
              'Github': 'github',
              'Google': 'google',
              //                        'icons': 'font-awesome',
              'Ip': 'map-marker',
              'Issues': 'exclamation-circle',
              'Language': 'language',
              'Options': 'sliders',
              'Password': 'lock',
              'Phone': 'phone',
              'Project': 'folder-open',
              'SecurityChallengeAnswer': 'commenting',
              'User': 'user',
              'zoomFit': 'arrows-alt',
              'zoomIn': 'search-plus',
              'zoomOut': 'search-minus'
            },
            minCollision: 60,
            neo4jData: this.nodeData,
            nodeRadius: 25,
            // onNodeDoubleClick: function (node) {
            //   // switch (node.id) {
            //   //   case '25':
            //   //     // Google
            //   //     window.open(node.properties.url, '_blank');
            //   //     break;
            //   //   default:
            //   //     var maxNodes = 5,
            //   //       data = neo4jd3.randomD3Data(node, maxNodes);
            //   //     neo4jd3.updateWithD3Data(data);
            //   //     break;
            //   // }
            // },
            // onRelationshipDoubleClick: function (relationship) {
            //   // console.log('double click on relationship: ' + JSON.stringify(relationship));
            // },
            // onNodeMouseEnter: function (d) {
            //   // console.log('鼠标经过获取数据哦…………',d,'--------JSON.stringify(d)可获得此节点所有数据-----------',JSON.stringify(d));
            //   // this.mouseNode = d
            //   _that.$emit('mouseNode', d)
            //   //  console.log(d,'xXXXXXXXXXXXXXXXXXXXXXXXXXX');
            // },
            // updateWithNeo4jData ( Neo4jD3JsonList ),
            zoomFit: true
          })
        },
        onNodeMouseEnter (d) {
          // console.log(d,'');
        }
      },
    
      created () {
        this.$nextTick(() => {
          this.init()
        })
      },
    }
    </script>
    
    <style>
    .neo4jd3 {
      height: 100%;
      width: 100%;
      /* height: 400px; */
      /* margin-bottom: 100px; */
      overflow: hidden;
    }
    </style>
    <style scope>
    .neo4jd3-graph {
      /* background-image: url("./pageBg.png"); */
      background-color: #ddd;
      background-size: cover;
      background-position: center center;
      border: 1px solid #ddd;
      border-radius: 5px;
      height: 3.8646rem;
      text-align-last: left;
    }
    /* 右侧关联图谱占比30% */
    .neo4jd3-info {
      width: 30%;
      font-size: 16px;
      padding: 10px;
      position: absolute;
      right: 0;
      top: 120px;
      /* display: none; */
    }
    
    .neo4jd3-info a {
      border: 1px solid;
      display: inline-block;
      font-size: 16px;
      line-height: 1.428571429;
      margin-left: 5px;
      margin-top: 5px;
      padding: 6px 12px;
    }
    
    .neo4jd3-info a.class {
      color: #fff;
    }
    
    .neo4jd3-info a.property {
      background-color: #fff;
      border-color: #ccc;
      color: #333;
    }
    
    .neo4jd3-info a.btn {
      margin-left: 5px;
      margin-top: 5px;
      opacity: 1;
    }
    
    .neo4jd3-info a.info {
      background-color: #a5abb6;
      border: 1px solid #9aa1ac;
      color: #fff;
    }
    
    .node.node-highlighted .ring {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      opacity: 0.5;
      stroke: #888;
      stroke-width: 12px;
    }
    
    .node .outline {
      cursor: pointer;
      fill: #a5abb6;
      pointer-events: all;
      stroke: #9aa1ac;
      stroke-width: 2px;
    }
    
    .node .ring {
      fill: none;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      stroke: #6ac6ff;
      stroke-width: 8px;
    }
    
    .node .text.icon {
      font-family: FontAwesome;
    }
    
    .node.selected .ring,
    .node:hover .ring {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity=30);
      opacity: 0.3;
    }
    
    .relationship {
      cursor: default;
    }
    
    .relationship line {
      stroke: #aaa;
    }
    
    .relationship .outline {
      cursor: default;
    }
    
    .relationship .overlay {
      cursor: default;
      fill: #6ac6ff;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    
    .relationship text {
      cursor: default;
    }
    .relationship.selected .overlay,
    .relationship:hover .overlay {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
      filter: alpha(opacity=30);
      opacity: 0.3;
    }
    svg {
      cursor: move;
    }
    </style>

--------------------

总结：

> 其实，你只需要复制最后的组件源码即可，至于怎么封装，完全看你心情，我只是提供一个方法，你也大可随便找个地方保存，引入使用即可。
> 
> 需要注意的地方也就是初始数据，注意格式即可。再就是要记得设置高度，我用的是rem单位，记得改一下。
> 
> ![120ba12b5a794db697d4aa40ee97a94a.png][]

[https_github.com_eisman_neo4jd3]: https://github.com/eisman/neo4jd3
[092792c14422496db5b217c8380e7ce6.png]: https://img-blog.csdnimg.cn/092792c14422496db5b217c8380e7ce6.png
[c2897e8075eb4015b70c759562ff1ac3.png]: https://img-blog.csdnimg.cn/c2897e8075eb4015b70c759562ff1ac3.png
[3936c5d1a7a94735bec34e80cdc9acad.png]: https://img-blog.csdnimg.cn/3936c5d1a7a94735bec34e80cdc9acad.png
[41be682d037844fdb7477caefe9bea3c.png]: https://img-blog.csdnimg.cn/41be682d037844fdb7477caefe9bea3c.png
[120ba12b5a794db697d4aa40ee97a94a.png]: https://img-blog.csdnimg.cn/120ba12b5a794db697d4aa40ee97a94a.png