最近在写后台管理系统的时候，遇到一个需求，就是给我一些节点，让我渲染到页面上，效果图如下：

之前写过一篇文章关于relation-graph关系图组件http://t.csdnimg.cn/7BGYm的用法

还有一篇关于relation-graph——实现右击节点显示详情+点击展开折叠操作——技能提升http://t.csdnimg.cn/K3rzf

关于插件的安装和使用，在此不再赘述。可以参照上面的两个链接。

下面给我的数据结构及想要的效果：

原始数据结构

this.taskRecords = {
    "nodes": [
        {
            "taskName": "完善客诉",
            "taskNodeName": "WanShanKeSu"
        },
        {
            "taskName": "PCB判责",
            "taskNodeName": "PCBPanZe"
        },
        {
            "taskName": "PCBA判责",
            "taskNodeName": "PCBAPanZe"
        },
        {
            "taskName": "方案确定并处理",
            "taskNodeName": "FangAnQuDingBingChuLi"
        }
    ],
    "connections": [
        {
            "from": "",
            "to": "WanShanKeSu",
            "depth": null
        },
        {
            "from": "",
            "to": "PCBPanZe",
            "depth": null
        },
        {
            "from": "",
            "to": "PCBAPanZe",
            "depth": null
        },
        {
            "from": "WanShanKeSu",
            "to": "PCBPanZe",
            "depth": null
        },
        {
            "from": "WanShanKeSu",
            "to": "PCBAPanZe",
            "depth": null
        },
        {
            "from": "PCBPanZe",
            "to": "FangAnQuDingBingChuLi",
            "depth": null
        },
        {
            "from": "PCBAPanZe",
            "to": "FangAnQuDingBingChuLi",
            "depth": null
        }
    ]
}

可以看出提供的节点有4个
完善客诉 PCB判责 PCBA判责 方案确定并处理
给出的连线有：

1.空 ——> 完善客诉
2.空 ——> PCB判责
3.空 ——> PCBA判责
4.完善客诉 ——> PCB判责
5.完善客诉 ——> PCBA判责
6.PCB判责 ——> 方案确定并处理
7.PCBA判责 ——> 方案确定并处理

如果不进行任何的处理，直接通过 渲染，则会出现下面的情况

上图乍一看，没啥问题，但是通过拖动【完善客诉】节点，就会发现问题了，就是【完善客诉】指向【PCBA判责】与【完善客诉】指向【PCB判责】的连线重合了，就会有【完善客诉】指向【PCB判责】再指向【PCBA判责】的错觉。这样的效果不是我们想要的。

想要实现【完善客诉】在【PCBA判责】与【PCB判责】节点中间，则需要指定排列的顺序。

比如上面的nodes节点更改顺序如下：

"nodes": [
		{
            "taskName": "PCB判责",
            "taskNodeName": "PCBPanZe"
        },
        {
            "taskName": "完善客诉",
            "taskNodeName": "WanShanKeSu"
        },
        {
            "taskName": "PCBA判责",
            "taskNodeName": "PCBAPanZe"
        },
        {
            "taskName": "方案确定并处理",
            "taskNodeName": "FangAnQuDingBingChuLi"
        }
    ],

这样就是我们想要的效果了
考虑到还有多层路径的情况，所以要通过递归来排列节点的顺序

我的思路

根据connections将空的节点填充为start开始节点，然后将没有任何from引申的节点，通通相当于指向end结束节点

1.开始 ——> 完善客诉
2.开始 ——> PCB判责
3.开始 ——> PCBA判责
4.完善客诉 ——> PCB判责
5.完善客诉 ——> PCBA判责
6.PCB判责 ——> 方案确定并处理
7.PCBA判责 ——> 方案确定并处理
8.方案确定并处理 ——> 结束

1.给from为空的节点赋值为start

let endArr = [];
let nodeObj = {};
let nodeArr = [];
this.taskRecords.connections.forEach((item) => {
  if (!item.from) {
    item.from = 'start';
  }
  endArr.push(item.from);
});

上面的endArr就是所有连线的开始节点，比如现在的endArr=['完善客诉','PCB判责','PCBA判责']

所有节点的集合：

this.taskRecords.nodes &&this.taskRecords.nodes.forEach((item) => {
  nodeArr.push(item.taskNodeName);
  nodeObj[item.taskNodeName] = [];
});

目前nodeArr=['完善客诉','PCB判责','PCBA判责','方案确定并处理']

this.taskRecords.connections &&this.taskRecords.connections.forEach((item) => {
  nodeObj[item.from].push(item.to);
});

经过上面的处理，nodeObj内容如下：

nodeObj = {
	'开始':['完善客诉','PCB判责','PCBA判责'],
	'完善客诉':['PCB判责','PCBA判责',],
	'PCB判责':['方案确定并处理'],
	'PCBA判责':['方案确定并处理'],
	'方案确定并处理':[],
	'结束':[]
}

我的思路是：遍历nodeObj，如果节点对应的数组长度大于1，则表示有好几个分支，则分支的排序尤为重要。比如【开始】节点，指向三个节点，我需要再次遍历，每一个子节点是否有好几个分支，如果有，则需要将该节点，位置安排在分支中间。

比如【完善客诉】的子节点【PCB判责】【PCBA判责】，则【完善客诉】位置应该是位于【PCB判责】和【PCBA判责】中间。

下面的代码可以实现这一操作：

for (let key in nodeObj) {
  if (nodeObj[key].length) {
    nodeObj[key].forEach((item) => {
      if (nodeObj[item].length > 1) {
        let arr = nodeObj[item].filter(
          (n) => nodeObj[key].indexOf(n) > -1
        );
        let len = Math.floor(arr.length / 2);
        let centerIndex = this.taskRecords.connections.findIndex(
          (no) => no.from == key && no.to == item
        );
        let currentObj = this.taskRecords.connections[centerIndex];
        this.taskRecords.connections.splice(centerIndex, 1);
        this.taskRecords.connections.splice(len, 0, currentObj);
      }
    });
  }
}

经过上面的操作：
endArr=['完善客诉','PCB判责','PCBA判责']
nodeArr=['完善客诉','PCB判责','PCBA判责','方案确定并处理']
所以存在于nodeArr中，但是不存在于endArr中的【方案确定并处理】应该有一条线是指向【结束】的

 nodeArr && nodeArr.forEach((item) => {
  if (endArr.indexOf(item) == -1) {
    this.taskRecords.connections.push({
      from: item,
      to: 'end',
    });
  }
});

重新组装nodes节点数据：

let nodes = [
  {
    text: '开始',
    id: 'start',
    color: this.info.taskList.length ? '#f90' : null,
  },
];
this.taskRecords.nodes &&
  this.taskRecords.nodes.forEach((item) => {
    nodes.push({
      id: item.taskNodeName,
      text: item.taskName,
      color: item.color,
      ...item,
    });
  });
nodes.push({
  text: '结束',
  id: 'end',
});

上面的步骤基本能实现想要的效果了。

//需要指定 节点参数和连接线的参数
this.graph_json_data = {
  rootId: 'start',
  nodes: nodes,
  lines: this.taskRecords.connections,
};
this.$refs.seeksRelationGraph.setJsonData(
  this.graph_json_data,
  (seeksRGGraph) => {}
);

我的效果图中，还有节点变亮，以及变亮节点中间的连线也是变亮的。这个就是给对应的节点和连线中添加color即可。

自定义插槽

下面要讲的是自定义插槽：
鼠标移入到节点上时，可以i显示其他的内容，此时需要使用插槽了。

<RelationGraph
          ref="seeksRelationGraph"
          style="
            height: 300px;
            width: 80%;
            margin: 0 auto;
            border: 1px solid #666;
          "
          :options="graphOptions"
        >
          <template #node="{ node }">
            <div class="my-node">
              <div class="my-node-text">{{ node.text }}</div>
              <div
                class="my-node-detail"
                v-if="node.data && node.data.creatorName"
              >
                <div @dblclick="handleCopy(node.data)">
                  {{ node.data.taskOwnerName || node.data.creatorName }}：{{
                    (node.data.completedTime || node.data.creationTime) | moment
                  }}
                </div>
              </div>
            </div>
          </template>
        </RelationGraph>

上面中的graphOptions就是一些普通的配置项，具体的可以在https://relation-graph.com/#/options-tools链接中在线配置好后，拷贝到本地使用。

自定义插槽，一定要注意：node中识别内容只有id``text``data，其中的data可以是个对象，一开始我使用的是detail对象，则没有显示出来。改成data就可以了。

.my-node {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .my-node-detail {
    display: none;
  }
  &:hover {
    .my-node-detail {
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -50%;
      width: 250px;
      height: auto;
      min-height: 60px;
      line-height: 30px;
      background: #fff;
      padding: 10px 0;
      border: 3px solid #f90;
      color: #000;
      z-index: 1;
      font-size: 18px;
      user-select: all;
    }
  }
}

监听全屏/取消全屏——保证关系图在页面中间

我的思路就是，全屏/取消全屏时，重新渲染

监听页面的全屏操作

mounted() {
  // 添加全屏变化的事件监听器
  document.addEventListener('fullscreenchange', this.onFullScreenChange);
},

方法：

onFullScreenChange() {
  this.$refs.seeksRelationGraph.setJsonData(
    this.graph_json_data,
    (seeksRGGraph) => {}
  );
},