流程圖、機器學習、模型訓練可視化(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破百讚的日子, 但願能幫助到更多的同窗~