Vue与relation-graph:高效打造关系图的秘诀

news2024/12/23 10:17:34

产品提需求啦,有一个需求就是实现一个功能:展现各个文件之间的调用关系,通过关系图的形式进行展示出来。

之前考虑使用antv x6实现此功能,但是考虑到只是展示的功能,也不需要进行交互,所以放弃使用antv x6,选择了更加简单的relation-graph插件。

先来看一个示例项目:

<template>
  <div>
    <div style="height: calc(100vh - 50px)">
      <RelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="onNodeClick"
        :on-line-click="onLineClick"
      />
    </div>
  </div>
</template>
<script>
// relation-graph也支持在main.js文件中使用Vue.use(RelationGraph);这样,你就不需要下面这一行代码来引入了。
import RelationGraph from 'relation-graph'
export default {
  name: 'Demo',
  components: { RelationGraph },
  data() {
    return {
      graphOptions: {
        allowSwitchLineShape: true,
        allowSwitchJunctionPoint: true,
        defaultJunctionPoint: 'border'
        // 这里可以参考"Graph 图谱"中的参数进行设置
      }
    }
  },
  mounted() {
    this.showSeeksGraph()
  },
  methods: {
    showSeeksGraph() {
      const __graph_json_data = {
        rootId: 'a',
        nodes: [
          { id: 'a', text: 'A', borderColor: 'yellow' },
          { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
          { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
          { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
        ],
        lines: [
          { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
          { from: 'a', to: 'c', text: '关系2' },
          { from: 'a', to: 'e', text: '关系3' },
          { from: 'b', to: 'e', color: '#67C23A' }
        ]
      }
      // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
      this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {
        // Called when the relation-graph is completed 
      })
    },
    onNodeClick(nodeObject, $event) {
      console.log('onNodeClick:', nodeObject)
    },
    onLineClick(lineObject, $event) {
      console.log('onLineClick:', lineObject)
    }
  }
}
</script>

运行效果:
image.png
这里有一个需要注意的点是,如果你的vue版本低于2.6.12时,图谱会显示异常,图谱加载不完全甚至网页中出现undefined。这时我们只需要将我们的版本升级一下就可以。
我选择的是安装版本为2.6.14,升级完vue版本之后,记得要npm install重新安装一下依赖,不然会出现vue-template-compiler和vue版本不匹配也不能成功运行项目的问题。

image.png

npm install vue@2.6.14 

接下来进入我们的正题,详细介绍一下开发过程。

1.引入relation-graph

// 注意:relation-graph支持Vue2、Vue3、React, 但引入的包名称都是【relation-graph】
npm install --save relation-graph

插件安装完成之后,需要在我们开发的页面中引入和注册

import SeeksRelationGraph from 'relation-graph'
components: { SeeksRelationGraph },

2.初始化设置

然后就是一些初始化的设置

 <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
      />

其中options就是图谱配置,一个对象,里面包含了具体的选项:
如果你的需求是单纯的展示关系图,不需要进行节点拖动操作的,可以将拖动禁掉

// 禁用拖拽
        disableDragNode: true,

其中layouts布局设置,

  • layoutName:布局方式(tree树状布局/center中心布局/force自动布局)
  • layoutClassName: 当使用这个布局时,会将此样式添加到图谱上,这里就是设置我们自定义的样式
  • min_per_width:节点距离限制:节点之间横向距离最小值
  • max_per_width:节点距离限制:节点之间横向距离最大值
  • min_per_height:节点距离限制:节点之间纵向距离最小值
  • max_per_height:节点距离限制:节点之间纵向距离最大值

    节点之间的最小距离建议不要太小了,如果节点内容比较多导致节点比较大,很容易导致节点之间重叠。
        layouts: [
          {
            label: '中心',
            layoutName: 'tree',
            layoutClassName: 'seeks-layout-center',
            defaultNodeShape: 0,
            from: 'left',
            // 通过这4个属性来调整 tree-层级距离&节点距离
            min_per_width: '300',
            max_per_width: '300',
            min_per_height: '40',
            max_per_height: '60',
          },
        ],

除此之外我们还可以为我们的图谱添加工具栏,对应的图谱配置分别为:

  • allowShowMiniToolBar:是否显示工具栏
  • allowShowRefreshButton:是否在工具栏中显示【刷新】按钮
  • allowShowDownloadButton: 是否在工具栏中显示【下载图片】按钮
  • allowSwitchLineShape:是否在工具栏中显示切换线条形状的按钮
  • allowSwitchJunctionPoint:是否在工具栏中显示切换连接点位置的按钮
    image.png
    上面列举的都是一些常用的配置和布局设置,除此之外官方还提供了很多其他的配置,详细参考官方文档

3、数据格式

通过设置一个json对象的nodes、lines、rootId来定义图谱中要展示的节点、关系线、根节点

     const __graph_json_data = {
         rootId: 'a',
         nodes: [
           { id: 'a', text: 'A', borderColor: 'yellow' },
           { id: 'b', text: 'B', color: '#43a2f1', fontColor: 'yellow' },
           { id: 'c', text: 'C', nodeShape: 1, width: 80, height: 60 },
           { id: 'e', text: 'E', nodeShape: 0, width: 150, height: 150 }
         ],
         lines: [
           { from: 'a', to: 'b', text: '关系1', color: '#43a2f1' },
           { from: 'a', to: 'c', text: '关系2' },
           { from: 'a', to: 'e', text: '关系3' },
           { from: 'b', to: 'e', color: '#67C23A' }
         ]
       }
      

nodes定义的是节点数据,lines定义的是关系线。

node节点

我们可以定义普通的节点,不需要进行样式的设置和定义,官方已经为我们定义好了。

        {
            id: 'N16',
            color: '#4ea2f0',
            text: '123311312'
          },

不过我们可以设置节点id,节点名称text,节点背景颜色color,这里与css有所不同,字体颜色是fontColor,节点形状nodeShape(0圆形,1矩形),
除了使用官方自定义的节点之外,我们还可以自定义节点,是通过html的形式进行定义。

          {
            id: 'N15',
            text: this.A.path,
            color: '#4ea2f0',
            width: 100,
            height: 100,
            html: `
            <div class='TIME' @click='nodeClick'>
                  <div>名称:${this.A.name}</div>
                  <div>掘金:${this.A.path}</div>
                  <div>QQ:${this.A.qq}</div>
              </div>
            `
          },

其中A是在data中定义的一个对象

     A: {
        name: '静Yu',
        path: 'https://juejin.cn/user/2225839800062215',
        qq: '789789798',
      },
lines关系线

from和to对应的都是节点的id,除此之外还可以在连接线上添加文字text,线条粗细lineWidth,线条颜色
color等等

        links: [
          { from: 'N1', to: 'N15' },
          { from: 'N15', to: 'N16' },
          { from: 'N15', to: 'N17' },
          { from: 'N15', to: 'N18' },
          { from: 'N15', to: 'N19' },
          { from: 'N18', to: 'N20' },
        ],

4.Events事件

官方为我们提供了五种触发事件

  • on-node-click点击节点事件
  • on-node-expand展开节点事件
  • on-node-collapse收缩节点事件
  • on-line-click点击线条事件
  • on-image-download当点击下载图片按钮时触发

较为常用的就是点击节点和线条触发的事件

  <SeeksRelationGraph
        ref="seeksRelationGraph"
        :options="graphOptions"
        :on-node-click="nodeClick"
   />
   nodeClick(nodeObject) {
      console.log(nodeObject)
   }

参数会返回节点的各种信息供我们使用
image.png

5.小结

在这篇文章中,我们深入探讨了如何使用Vue和relation-graph高效打造关系图。我们详细介绍了数据准备、关系映射、点击事件等关键步骤。通过这些技巧和解决方案,我们可以更好地利用Vue和relation-graph库来创建直观且易于维护的关系图。
总之,Vue与relation-graph的结合为我们提供了一种强大且灵活的方式,以高效地构建各种复杂的关系图。通过掌握这些秘诀,我们可以更好地利用Vue和relation-graph库,轻松打造出高质量的关系图应用程序,从而更好地满足各种需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1034318.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【操作系统笔记十二】Linux常用基础命令

Linux 常用快捷键 Tab 命令或路径等的补全键&#xff0c;特别常用的快捷键Ctrl insert 复制命令行内容&#xff08;常用可提高效率&#xff09;Shift insert 粘贴命令行内容&#xff08;常用可提高效率&#xff09;Ctrl C 中断当前任务&#xff08;退出&#xff09;Ctrl Z…

Java笔记:看清类加载过程

1 类加载的过程 1.1 加载 “加载”是“类加载”(Class Loading)过程的第一步。这个加载过程主要就是靠类器实现的&#xff0c;包括用户自定义类加载器。 加载的过程 在加载的过程中&#xff0c;JVM主要做3件事情 1&#xff09;通过一个类的全限定名来获取定义此类的二进制字节…

【Linux网络编程】日志与守护进程

日志是网络服务器程序在后台以守护进程的形式运行时&#xff0c;处理情况的描述被打印到了日志文件里面&#xff0c;方便维护人员查看。 1.前台进程与后台进程 左边会话输入命令 sleep 10000 & 代表进程后台运行&#xff0c;右边会话输入命令 sleep 20000可以看到命令行解…

珠海建筑模板厂家-能强优品木业:为您提供优质建筑模板解决方案

在珠海这座美丽的沿海城市&#xff0c;建筑行业蓬勃发展&#xff0c;对于高质量的建筑模板需求也日益增加。在这里&#xff0c;有一家备受赞誉的建筑模板厂家&#xff0c;那就是能强优品木业。作为一家专业的建筑模板供应商&#xff0c;他们以优质的产品和卓越的服务在业界享有…

联合查询

1.条件 2.步骤 1.判断列数 2.判断回显 3.重要 在回显位置写 查看字段名字 使用工具 hackbar

C语言while循环嵌套-动态字母

1、题目 使用C语言实现对字母动态移动&#xff08;根据用户输入的字符将字符从屏幕的坐标移动屏幕的右边&#xff09;。 2、分析 字符的移动核心是在显示的字母前面补上对应的空格字符内容&#xff0c;配合上延时就可以实现字符从屏幕左边移动到屏幕右侧的效果&#xff0c;实现…

【全网最全】2023华为杯研究生数学建模B题完整思路+python代码+20页超详细启发式算法+FFT(后续会更新)

目录 点击资料获取入口 DFT在通信等领域的重要应用,以及目前采用FFT计算DFT的硬件开销大的问题。提出了将DFT矩阵分解为整数矩阵乘积逼近的方法来降低硬件复杂度。 建模目标是对给定的DFT矩阵F_N,找到一组K个矩阵A,使F_N和A的乘积在Frobenius范数意义下尽可能接近,即最小化目标…

开源负载测试神器K6

简介&#xff1a;K6是一个强大的开源负载和性能测试工具&#xff0c;用于测试软件系统的性能和可靠性。K6的使用主要是编写测试脚本并运行&#xff0c;这些脚本主要用JavaScript编写&#xff0c;可以使用HTTP&#xff0c;WebSocket等多种协议进行测试。并且易于安装和运行&…

Java Web框架,如Spring MVC,是一种用于构建Web应用程序的软件框架:学生考试Web应用程序

文章目录 什么是Java Web框架&#xff1f;MVC模式在Spring MVC中的应用简单的学生考试Web应用程序设置Spring MVC项目创建实体类创建考试实体类创建控制器创建服务层创建数据库创建视图配置Spring MVC实现功能运行应用程序运行应用程序 &#x1f388;个人主页&#xff1a;程序员…

MySQL学习笔记3

MySQL的源码编译安装&#xff1a; 1、参考MySQL的源码安装官方文档&#xff1a; 2、源码安装定制选项&#xff1a; 3、源码安装三部曲&#xff1a;配置、编译、安装。 4、软件安装包&#xff1a; mysql-boost-5.7.43.tar.gz 5、安装需求&#xff1a; 安装需求具体配置安装目…

安装gpu版本的paddle和paddleclas

安装gpu版本的paddle python -m pip install paddlepaddle-gpu2.3.2.post111 -f https://www.paddlepaddle.org.cn/whl/windows/mkl/avx/stable.html以上支持cuda11.1版本 其他需求可查阅文档在这里 安装paddleclas 1 在虚拟环境中安装所需的Python库&#xff1a; pip inst…

Cortex-M3/M4堆栈

一、Cortex-M3/M4堆栈操作 Cortex-M3/M4 使用的是“向下生长的满栈”模型。堆栈指针 SP 指向最后一个被压入堆栈的 32 位数值。在下一次压栈时&#xff0c; SP 先自减 4&#xff0c; 再存入新的数值&#xff0c;如图所示为堆栈的PUSH操作。 POP 操作刚好相反&#xff1a;先从 …

电子信息工程专业课复习知识点总结:(五)通信原理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 第一章通信系统概述——通信系统的构成、各部分性质、性能指标1.通信系统的组成&#xff1f;2.通信系统的分类&#xff1f;3.调制、解调是什么&#xff1f;有什么用…

MySQL详解六:备份与恢复

文章目录 1. 数据库备份的分类1.1 从物理和逻辑上分类1.1.1 物理备份1.1.2 逻辑备份 1.2 从数据库的备份策略角度上分类1.2.1 完全备份1.2.2 差异备份1.2.3 增量备份 1.3 常见的备份方法 2. MySQL完全备份2.1 完全备份简介2.2 优点与缺点2.3 实现物理冷备份与恢复2.3.1 实现流程…

备受以太坊基金会青睐的 Hexlink,构建亿级用户涌入 Web3的入口

早在2021年9月&#xff0c;以太坊创始人Vitalik Buterin就曾提出了EIP-4337&#xff08;账户抽象&#xff09;提案&#xff0c;并在去年10月对该提案进一步更新&#xff0c;引发行业的进一步关注。在今年3月&#xff0c;EIP-4337提案正式通过审计&#xff0c;并成为了ERC-4337标…

conda常用指令

常用conda指令 查看当前有哪些环境&#xff0c;有base环境 conda env list 创建环境 # conda create -n 你的环境名 python版本号 # 创建python3.10&#xff0c;名为env虚拟环境 conda create -n env python3.10 激活环境 conda activate env

java框架-Spring-AOP

AOP:动态代理 开发步骤&#xff1a; 导入aop模块定义业务逻辑类定义切面类&#xff1b; -. 切面类标注&#xff1a;Aspect -. 切面类注解&#xff1a; Before: 前置通知, 在方法执行之前执行 After: 后置通知, 在方法执行之后执行 。 AfterRunning: 返回通知, 在方法返回结果之…

[杂谈]-快速了解半波和全波整流

快速了解半波和全波整流 文章目录 快速了解半波和全波整流1、滤波2、半波整流器3、全波整流器4、常见问题 整流器是一种将交流信号转换为脉动直流信号以及将交流电转换为直流电的电子电路。 我们日常生活中几乎所有的电子项目都会用到它。 根据周期传导&#xff0c;本文我们介绍…

【Python】ModuleNotFoundError: No module named ‘Crypto‘

今天在使用一个新的库Crypto时发生了报错 Crypto安装成功~ 导入Crypto模块也没有问题 运行时却发生了报错&#xff1a; 没有这个模块&#xff1f; 我明明安装成功了&#xff0c;为什么报错没有这个库呢&#xff1f; 于是我去查看了一下是不是没有安装上呢&#xff1f; 为什么…

sql注入挖掘

出现的条件 只要是和数据库有交互 没有过滤拼接的sql语句可以执行 判断 这个是在url筐里的