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

前言

有时在开发中用过的一些比较好的功能没有及时封装，导致日后再用的时候还得再来一遍，现在是想将这些功能封装成组件，做到“”拿来即用“”，为了更好地照顾到版本兼容，我直接将资源下载到本地作为静态资源使用，这个组件基于vue2,如果你是个新手不会将之转为vue3或者react等框架，可以留言，我看到后会更新，这里默认大家具有一定经验。

这个组件的好处：相比于直接使用D3或者echarts，他的优点在于有大量已经内置的功能，且可以通过修改源码方式轻松定制，而不必从0开始写。具体更多的使用方式可以参考文档：

https://github.com/eisman/neo4jd3

效果图：

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

使用

第一步

public文件夹中，将以下：

一个css文件放入static下的css中；

两个js文件放入static下的js文件中。

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

neo4jd3.css:https://github.com/eisman/neo4jd3

d3.min.js:https://github.com/eisman/neo4jd3

neo4jd3.js :https://github.com/eisman/neo4jd3

第二步

components文件夹下新建Neo4jD3文件夹，新建index.vue文件，复制以下代码粘贴过去，然后再index.js里注册全局组件

类似这样：

main.js 里面引入vue.use一下即可

目录结构

组件代码：


 
<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单位，记得改一下。

相关阅读:
c++暴力法
 WPF转义字符
 图像处理——图像增强
 从 HTA 中启动应用程序
 为什么工业设计公司价格这么高？
JWT笔记
 Cookie与Session
华为机试真题实战应用【赛题代码篇】-数组组成的最小数字(附Java和Python代码)
推荐一个专利检索的网站
 Guide1：Building a RESTful Web Service
原文地址：https://blog.csdn.net/wanghaoyingand/article/details/126843184