共计 947 个字符,预计需要花费 3 分钟才能阅读完成。
背景:
因为业务场景须要展现作业之间的依赖关系,因为一些开源的插件和以后的业务逻辑有一些抵触,集体打算尝试从零开始,一点点实现本人的 DAG 图。同时用博客记录本人实现过程和总结,不正确的中央,欢送斧正晋升。
场景剖析:
- 数据开发中经常有作业之间的依赖,在执行作业的时候,可能会呈现有些作业失败,或者重试,这时候,运维或者开发的人,须要有一个很直观的图去展现作业之间的依赖,这时候 DAG 依赖流程图就是一个很好的展示模式。
- 大数据场景下,可能会呈现很多节点,甚至可能达到上千,甚至上万的节点,节点之间的边有可能也会很多,大的数据下,图的渲染工夫须要思考在内
- 用户有可能在看了图之后,想间接重跑或者查看某个节点的上下游节点,等等运维操作
- 用户可能须要图拖动某个算子,点击某个算子,复制某些算子的名称等一些操作
实现目标:
基于以上客户的要求,咱们大抵明确要实现目标和需要,梳理如下
- 用图的形式展现作业之间的依赖,根本能力要达到
图要可能撑持大数据场景,在很多节点下
- 节点之间布局清晰
- 节点的之间的连线不要重叠,少穿插
- 图可能反对缩放,拖动
- 图中节点反对拖动
图要反对运维能力
- 悬浮某个节点,展现该节点的上下游,可能辨别上下游节点
- 选中某个节点,以及反对选中某个节点全副上游或者上游节点
- 右键能够定制化业务操作,例如作业实例的重跑,进行
- 作业名称反对复制
- 选中具体某个节点能够展现该节点的信息面板
优化晋升
- 提供鸟瞰图的性能,保障大数据下能够查找节点
- 提供搜寻性能,可能精准在图上定位出要找的作业
交互设计稿:
基于以上指标,设计稿大抵如下
技术选型:
个别的 DAG,就两种形式,一种是 canvas 实现,另外一种就是 svg,因为 svg 对于事件处理比较简单,然而性能会差一些,后续如果 svg 性能搞不定,能够应用 canvas 优化,老手,所以这里我抉择了 svg。用了 svg.js, 这个开源的插件,封装了一些简略的 svg 函数,能够缩小局部工作量。
实现过程概览:
集体打算分一下几个方面,逐渐实现。
- 布局,背景,交互设计方案,技术选型
- 节点的分层布局算法
- 节点之间的线条门路
- 图上运维 – 右键,选中,节点复制等
- 图上事件 – 缩放,平移,节点拖动等
- 前期优化 – 纵向排列优化
- 前期优化 – 鸟瞰图以及搜寻框及其他
- 前期优化 – 大数据节点优化
根本工作曾经筹备完了,接下来开搞!
本文由华为云公布
正文完