流程图、机器学习、模型训练可视化(DAG)的前端实现

以前写过从0到1的前端DAG实现流程.

为了方便有须要的同窗使用,

现推出npm插件形式的版本.

示例网站, 点这里跳转, 可改JSON看效果

效果展现

• 画布移动 / 复原

  

• 画布缩放 / 复原

  

• 拖动节点

  

• 框选拖动多个节点

• 添加节点

  

• 删除节点

  

• 添加节点关系

  

• 删除节点关系

  

• 添加节点入口 / 出口

  

• 展现模型训练流程 ( 自定义用法需自行开发 )

使用方法

• 基础安装

npm install --save dag-board
复制代码

vue项目的main.js中

import DAGBoard from 'dag-board'
Vue.use(DAGBoard)
复制代码

具体文件里中

<DAGBoard :DataAll="DataAll" @updateDAG="updateDAG" @editNodeDetails="editNodeDetails"></DAGBoard>
复制代码

DataAll: 数据源
updateDAG:每次动做行为会抛出最新的数据, 和对应事件名称.
editNodeDetails: 可选内容,右键点击节点会带出节点数据,用此方法接受, 进行二次开发.好比更改节点携带的数据等.
复制代码

• 高级安装 (动态添加节点的时候模拟用)

<node-bus v-if="nodeBusDragging" //  是否正在添加节点
    :value="nodeName"                       //   模拟的节点名称
    :pos_x="nodeBusPositionX"          //   动态赋值 鼠标位置的x坐标 
    :pos_y="nodeBusPositionY" />      //   动态赋值 鼠标位置的y坐标
复制代码

以上内容都可前往github 下载项目查看使用过程, 熟练使用vue便可无障碍阅读代码.

数据源的扩展性 / 样式自定义

为了更多同窗能友好体验,在github右侧有JSON模拟器.使用以下图.

• 节点自定义

  

一份完整的节点包括如下几个内容
{
			"id": 1,                             // 节点id
			"in_ports": [ 0 ],                   // 入口下标
			"name": "NODE_PARENT",               // 节点名称
			"out_ports": [ 0, 1 ],               // 出口下标
			"pos_x": 157,                        // 节点坐标 距离左侧
			"pos_y": 120,                        // 节点坐标 距离顶部
			"nodeStyle": {                       /* 非必要 节点样式 */ 
				"border": "2px solid red"
			},
			"iconStyle": {                       /* 非必要 节点icon样式 */
				"background": "red"
			},
			"iconClassName": "el-icon-link",     /* 非必要  节点icon的类名 */
			"nameDescribe": "气泡内容",           /* 非必要 气泡内容 */               
		},
复制代码

• 节点关系自定义

  

// 一份完整的节点关系包括如下几个内容
"edges": [
		{
			"dst_input_idx": 0,  // 来源节点出口的下标
			"dst_node_id": 2,    // 来源节点的id
			"id": 1,             // 节点的id
			"src_node_id": 1,    // 目标节点的id
			"src_output_idx": 0  // 目标节点的入口下标
            "style": { }      /* 非必要 自定义节点样式 */
		}
	],
复制代码

更多内容移步github~ 戳我到github

不少内容致敬了阿里PAI的早期样式

若是使用当中有任何问题或者实现不了的需求,

能够qq群艾特我.793841737.

今天是这个项目github破百赞的日子, 但愿能帮助到更多的同窗~