hi-craft / DAGBoard

一步步实现DAG可视化及简单交互, 可用于js模拟流程图等

*服务器迁移通知: 由于本人vultr到期不再续用...要迁移服务器内容到新的云服务器, 2019年05月10日17点开始, 期间zhanglizhong.cn 会出现无法登陆, 大家谅解... *大家好, 国内要备案, 太麻烦了, 迁回去了, 向vultr低头

增加一个github线上地址 https://murongqimiao.github.io/DAGBoard/#/

前端实现有向无环图

基于SVG的DAG(单向无环图)前端实现.适用于机器学习平台或流程图. 由于只有我一人开发,无暇兼顾兼容,推荐使用chrome内核使用~ 或引入项目时自行添加svg兼容,或者提issue给我,会努力解决.

本项目为公司内部PAI需求, 参考了国内外其他公司的DAG实现

在线预览

https://murongqimiao.github.io/DAGBoard/#/

简书配套教程地址:

• [ 教程1 ] https://www.jianshu.com/p/b044f94e8211
• [ 教程2 ] https://www.jianshu.com/p/e02771a5d72b
• [ 教程3 ] https://www.jianshu.com/p/5d29b09cb031

感谢打赏!~

[蜗牛]大佬

已经实现的内容:

• 图. 节点. 连线 的展示 v1.0.0
• 节点的增删, 位置变动 ( 开放右键功能 v1.0.0
• 连线的增删 ( 开放右键功能 v1.0.0
• 整图放缩 拖动 框选节点 v1.0.0
• 鼠标滚轮和mac现在可以控制缩放了 v1.0.1
• 双击节点可以改名字 v1.0.1
• 节点效果的动态更改(running状态) v1.0.1

版本更新预告:

考虑加入

• 根据type类型的不同增加节点的图形
• 做成黑盒

目录结构

src

components

STEP

STEP1 绘制节点

STEP2 绘制节点的连线

STEP3 绘制节点拖动的模拟框

STEP4 绘制节点拖动连线的模拟框

STEP5 组件抽离

STEP6 节点、连线的增删

STEP8 完整实现

沟通联系

前端工程化实践群793841737 或者issue 一步到位

赞助打赏

https://github.com/murongqimiao/sundries/blob/master/payeeAli.jpg