vue2使用 relation-graph 展示关系图谱

前言：

关系图是一种非常形象的展示方式，能直观的展示各个字体之间的关联

我们自己手写关系图可能会比较麻烦，不过 relation-graph 向 vue2 提供了关系图的组件，安装之后正确引入该组件就可以使用关系图，详情还可以看官网，官网有详细的案例和各个案例的源码

简单的使用大家可以通过官网的案例 ，因为官网上讲的肯定比我要更明白

这篇文章主要解决从后端返回 数据渲染结点 和 解决关系图缩放抽搐 的问题

 后端返回数据渲染结点

写死的数据结点

官网里的代码是直接写死了 数据结点 ，这样比较方便，但是当需要拿到后端的数据时，就要发请求取到后端数据了

 官网代码

官网的结点数据放在这个方法中

 methods: {
    showSeeksGraph(query) {
      // 使用要点：通过节点属性expandHolderPosition: 'right' 和 expanded: false 可以让节点在没有子节点的情况下展示一个"展开"按钮
      //         通过onNodeExpand事件监听节点，在被展开的时候有选择的去从后台获取数据，如果已经从后台加载过数据，则让当前图谱根据当前的节点重新布局
      var graphJsonData = {
        'rootId': 'a',
        'nodes': [
          { 'id': 'a', 'text': 'a', color: 'red' },
          { 'id': 'b', 'text': 'b' },
          { 'id': 'b1', 'text': 'b1' },
          { 'id': 'b1-1', 'text': 'b1-1' },
          { 'id': 'b1-2', 'text': 'b1-2' },
          { 'id': 'b1-3', 'text': 'b1-3' },
          { 'id': 'b1-4', 'text': 'b1-4' },
          { 'id': 'b1-5', 'text': 'b1-5' },
          { 'id': 'b1-6', 'text': 'b1-6' },
          { 'id': 'b2', 'text': 'b2' },
          { 'id': 'b2-1', 'text': 'b2-1' },
          { 'id': 'b2-2', 'text': 'b2-2' },
          { 'id': 'c', 'text': 'c' },
          { 'id': 'c1', 'text': 'c1' },
          { 'id': 'c2', 'text': 'c2' },
          { 'id': 'c3', 'text': 'c3' }],
        'links': [
          { 'from': 'a', 'to': 'b' },
          { 'from': 'b', 'to': 'b1' },
          { 'from': 'b1', 'to': 'b1-1' },
          { 'from': 'b1', 'to': 'b1-2' },
          { 'from': 'b1', 'to': 'b1-3' },
          { 'from': 'b1', 'to': 'b1-4' },
          { 'from': 'b1', 'to': 'b1-5' },
          { 'from': 'b1', 'to': 'b1-6' },
          { 'from': 'b', 'to': 'b2' },
          { 'from': 'b2', 'to': 'b2-1' },
          { 'from': 'b2', 'to': 'b2-2' },
          { 'from': 'a', 'to': 'c' },
          { 'from': 'c', 'to': 'c1' },
          { 'from': 'c', 'to': 'c2' },
          { 'from': 'c', 'to': 'c3' }]
      }
      console.log(JSON.stringify(graphJsonData))
      this.g_loading = false
      this.$refs.seeksRelationGraph.setJsonData(graphJsonData, (seeksRGGraph) => {
        // 这些写上当图谱初始化完成后需要执行的代码
      })
    },

 小改进之后

其实向后端发请求拿到数据 ，就是把结点的数据替换成 请求中的数据

 可以看到就是在之前加了一个发送请求的代码 ，其实这个代码也是有问题的，因为不能说是完全做到动态创建结点，因为要给数据预留结点，你就要先知道要返回多少条数据展示出来 ，其他的部分没有太大改动，还是保留官网代码

 setGraphData() {
         axios.get('https://jsonplaceholder.typicode.com/users/')
         .then(res => {
           console.log(res)
           var length =  res.data.length
            var __graph_json_data = {
          'rootId':'Users',
           'nodes': [
                { 'id': '0', 'text': 'Users'},
                  { 'id': '1', 'text': res.data[0].name},
                    { 'id': '11', 'text': res.data[0].email},
                    { 'id': '12', 'text': res.data[0].phone},
                  { 'id': '2', 'text': res.data[1].name},
                    { 'id': '21', 'text': res.data[1].email},
                    { 'id': '22', 'text': res.data[1].phone},
                  { 'id': '3', 'text': res.data[2].name},
                    { 'id': '31', 'text': res.data[2].email},
                    { 'id': '32', 'text': res.data[2].phone},
                  { 'id': '4', 'text': res.data[3].name},
                    { 'id': '41', 'text': res.data[3].email},
                    { 'id': '42', 'text': res.data[3].phone},
                  { 'id': '5', 'text': res.data[4].name},
                    { 'id': '51', 'text': res.data[4].email},
                    { 'id': '52', 'text': res.data[4].phone},
                  { 'id': '6', 'text': res.data[5].name},
                     { 'id': '61', 'text': res.data[5].email},
                     { 'id': '62', 'text': res.data[5].phone},  

            ],
              'links': [
            {'from': '0', 'to': '1'},
            {'from': '0', 'to': '2'},
            {'from': '0','to': '3' },
            {'from': '0', 'to': '4'},
            {'from': '0', 'to': '5'},
            {'from': '0', 'to': '6'},
              {'from': '1', 'to': '11'},
              {'from': '1', 'to': '12'},
              {'from': '2', 'to': '21'},
              {'from': '2', 'to': '22'},
              {'from': '3', 'to': '31'},
              {'from': '3', 'to': '32'},
              {'from': '4', 'to': '41'},
              {'from': '4', 'to': '42'},
              {'from': '5', 'to': '51'},
              {'from': '5', 'to': '52'},
              {'from': '6', 'to': '61'},
              {'from': '6', 'to': '62'},
           ]
        }
            this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
          // 这些写上当图谱初始化完成后需要执行的代码
        })
      })
    
        this.g_loading = false    
      },

 解决缩放抽搐问题

这个问题就是个 bug 了，可以看下图 ，当鼠标拖动或者缩放时，关系图就鬼畜了，一直重复自动刷新，也没有实现移动和缩放 ， 它一直卡在一个位置

 解决

解决问题挺简单的，就是之前 div 的高度 是设置成 100%，改成 vh 后问题就迎刃而解

 <!-- 原代码 <div v-loading="g_loading" style="height:100%;"> -->
    <div v-loading="g_loading" style="height:150vh">

      <SeeksRelationGraph
       ref="seeksRelationGraph" 
       :options="graphOptions" 
       :on-node-expand="onNodeExpand"
       :on-node-click="onNodeClick"
       >
      </SeeksRelationGraph>
    </div>

---