从零开始画自己的DAG作业依赖图(一)--前期准备

本文介绍了从零开始构建DAG图以展示作业依赖的背景和需求,包括大数据场景下的渲染效率、用户交互功能。目标包括清晰的节点布局、高效的运维操作、以及支持缩放、拖动等交互。技术选型上,选择了svg.js作为起点,以应对复杂的业务需求。后续将逐步展开节点布局、线条路径、运维功能等方面的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:

由于业务场景需要展示作业之间的依赖关系,由于一些开源的插件和当前的业务逻辑有一些冲突,个人打算尝试从零开始,一点点实现自己的DAG图。同时用博客记录自己实现过程和总结,不正确的地方,欢迎指正提升。

场景分析:

  1. 数据开发中常常有作业之间的依赖,在执行作业的时候,可能会出现有些作业失败,或者重试,这时候,运维或者开发的人,需要有一个很直观的图去展示作业之间的依赖,这时候DAG 依赖流程图就是一个很好的展现形式。
  2. 大数据场景下,可能会出现很多节点,甚至可能达到上千,甚至上万的节点,节点之间的边有可能也会很多,大的数据下,图的渲染时间需要考虑在内
  3. 用户有可能在看了图之后,想直接重跑或者查看某个节点的上下游节点,等等运维操作
  4. 用户可能需要图拖动某个算子,点击某个算子,复制某些算子的名称等一些操作

实现目标:

基于以上客户的要求,我们大致明确要实现目标和需求,梳理如下

  1. 用图的方式展示作业之间的依赖,基本能力要达到
  2. 图要能够支撑大数据场景,在很多节点下
    • 节点之间布局清晰
    • 节点的之间的连线不要重叠,少交叉
    • 图能够支持缩放,拖动
    • 图中节点支持拖动
  3. 图要支持运维能力
    • 悬浮某个节点 ,展示该节点的上下游,能够区分上下游节点
    • 选中某个节点,以及支持选中某个节点全部上游或者下游
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值