relation-graph实现企业架构图，关系图等(天眼查，企查查等企业架构图等实现)

使用relation-graph实现企业架构图与d3.js穿透图动态加载数据

原创

已于 2023-05-06 10:38:38 修改 · 7.5k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #vue.js

于 2022-11-15 16:14:28 首次发布

本文详细介绍了如何使用relation-graph插件和d3.js库来创建企业架构图，包括动态加载数据、节点点击事件、节点展开逻辑以及数据优化。通过示例代码展示了如何配置relation-graph以达到预期效果，并提供了d3.js实现穿透图的链接，以展示连接线上的文字。同时，文章讨论了在实际应用中遇到的问题，如箭头方向和连接线文字重叠，并提出了优化方案。

企业架构图，关系图等实现

业务需求
官方文档地址
实现代码
接口返回数据格式（最最最重要点）
动态效果图
全部代码
遗憾
效果优化
第二种方法实现（[d3.js实现穿透图](https://blog.youkuaiyun.com/wangjiecsdn/article/details/130488425?spm=1001.2014.3001.5501)）连接线可以展示文字

业务需求

文章篇幅可能过长，注重讲解想要的效果图属性怎么配置，动态请求后端接口数据的渲染，以及点击节点或者节点展开按钮追加数据逻辑。如想直接实现效果图，可直接拉取全部代码标题中的代码，跟后端沟通返回数据格式，更改接口即可，文章最后还有优化代码，会比效果图更加完善，也可自行翻阅。

1、公司想要的效果图

在这里插入图片描述

2、relation-graph插件自带的dome效果图

在这里插入图片描述

3、实现效果图

在这里插入图片描述

官方文档地址

官方文档地址：http://www.relation-graph.com/#/docs/start
初始化关系图时需要配置属性，参考文档api

在这里插入图片描述

实现代码

引入relation-graph

npm install --save relation-graph

建立关系图dom节点（必须拿div包裹，height设置节点高度适配屏幕）

<div class="legalperson">
    <div style="height: calc(100vh - 50px)" v-loading="relationLoading">
      <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
        :on-node-expand="onNodeExpand"
      />
    </div>
  </div>

引入插件，配置关系图属性，初始化根节点(可根据不同项目配置自己想要的属性)

<script>
import SeeksRelationGraph from "relation-graph";   //引入插件
import {
   
    query_tree1 } from "@/api/affiliated";   //接口api

export default {
   
   
  name: "legalperson",
  components: {
   
    SeeksRelationGraph },
  data() {
   
   
    return {
   
   
      relationLoading: false,
      currentCase: "双向树",
	  //关系图属性配置（重要）
      graphOptions: {
   
   
        layouts: [
          {
   
   
            label: "中心",
            layoutName: "tree",   //布局方式（tree树状布局/center中心布局/force自动布局）
            layoutClassName: "seeks-layout-center",   //当使用这个布局时，会将此样式添加到图谱上
            defaultJunctionPoint: "border",   //默认的连线与节点接触的方式
            defaultNodeShape: 0,   //默认的节点形状，0:圆形；1:矩形
            defaultLineShape: 1,   //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
            centerOffset_y: 130,   //根节点y坐标偏移量（针对项目配置单位为px）
            min_per_width: 150,   //节点距离限制:节点之间横向距离最小值
            min_per_height: 180,   //节点距离限制:节点之间纵向距离最小值
          },  
        ],
        defaultNodeShape: 1,    //默认的节点形状，0:圆形；1:矩形
        defaultExpandHolderPosition: "bottom",  //节点展开关闭的按钮位置
        defaultLineShape: 4,   //默认的线条样式（1:直线/2:样式2/3:样式3/4:折线/5:样式5/6:样式6）
        defaultJunctionPoint: "tb", //默认的连线与节点接触的方式（border:边缘/ltrb:上下左右/tb:上下/lr:左右）当布局为树状布局时应使用tb或者lr，这样才会好看
        defaultNodeBorderWidth: 0.2, //节点边框粗细
        defaultLineColor: "rgba(0, 186, 189, 1)",    //默认的线条颜色
        defaultNodeColor: "rgba(0, 206, 209, 1)",    //默认的节点背景颜色
        defaultNodeWidth: "130", //节点宽度
        defaultNodeHeight: "80", //节点高度
        defaultFocusRootNode: false,   //默认为根节点添加一个被选中的样式
        moveToCenterWhenResize: false,   //当图谱的大小发生变化时，是否重新让图谱的内容看起来居中
      },
      __graph_json_data: {
   
   },   //节点的数据
    };
  },
  mounted() {
   
   
    this.showSeeksGraph();
  },
  methods: {
   
   
    //初始化节点数据
    showSeeksGraph(query) {
   
   
      this.__graph_json_data = {
   
   
        rootId: "0",    //根节点唯一id
        nodes: [
          {
   
   
            id: "0",
            offset_x: -59,    //根节点位置偏移量
            text: "XXXXXX股份有限公司",  //节点文本
            width: 250,     //根节点宽度
            color: "#0084ff",   //根节点背景色
            fontColor: "#ffffff",   //根节点字体颜色
            childrenLoaded: true,   //配置标识，点击展开节点按钮时判断，不需要重复请求接口（懒加载数据）
          },
          //也可以在此添加静态子节点（展示效果图）
          {
   
   
            id: "101",
            text: "节点1",
            expandHolderPosition: "top",    //展开节点的显示位置，查看后续效果图
            expanded: false,
            childrenLoaded: false,   //节点重复展开标识
          },
          {
   
   
            id: "102",
            text: "节点2",
            expandHolderPosition: "bottom",
            expanded: false,
            childrenLoaded: false,   //节点重复展开标识
          },
        ],
        links: [
        //根节点上方侧的关系数据，注意关系的方向，是从 节点--->根节点：
          {
   
    from: "101", to: "0" },    //上方（从子节点出发到根节点）
          {
   
    from: "0", to: "102" },   //下方（从根节点出发到子节点）
        ],
      };
      //将根节点渲染进图谱中
      this.$refs.seeksRelationGraph.setJsonData(this.__graph_json_data,(seeksRGGraph) => {
   
   
          this.shareholdersData();
        }
      );
    },
  },
};
</script>

现在所实现的效果图(前端写死的静态节点值)；
动态获取接口数据渲染

可以看到结构树需要的数据里属性必须有自己的要求，所以公司想要实现案例本就没太多的可选性，所以只能希望后端配合自己做返回的数据处理，如果把数据处理都放在前端的话，性能要求可能会有问题，不建议此操作。

重复代码就不多写了，直接写请求接口获取渲染数据的方法，属性配置不变

 mounted() {
   
   
    this.showSeeksGraph();
  },
  methods: {
   
   
    //加载根节点数据后请求接口
    showSeeksGraph(query) {
   
   
      this.__graph_json_data = {
   
   
        rootId: "0",
        nodes: [
          {
   
   
            id: "0",
            offset_x: -59,
            text: "XXXXXX股份有限公司",
            width: 250,
            color: "#0084ff",
            fontColor: "#ffffff",
            childrenLoaded: false,
          },
          // { id: "102", text: "对外投资", color: '#83D942', expandHolderPosition: 'bottom', expanded: false, childrenLoaded: false, },
          // { id: "101", text: "股东",},
        ],
        links: [
          // { from: "101", to: "0", color: "#6d9bfd", },
        ],
      };
      //setJsonData初始化数据方法
      this.$refs.seeksRelationGraph.setJsonData(this.__graph_json_data,(seeksRGGraph) => {
   
   
        this.shareholdersData();
        }
      );
    },
    //加载接口数据
    shareholdersData() {
   
   
      let dictionary = {
   
   
        parentcodeName: ""

最低0.47元/天解锁文章