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