d3.js 基于vue流程控制图
效果展示
参考文章:(https://www.jianshu.com/p/36edb4031b2a)
package.json 依赖下载(注意版本)
"d3": "^5.14.2",
"dagre-d3": "^0.6.4",
html
<template>
<div class="progressControl">
<el-row>
<el-button type="primary" v-for="(item,index) in directions" :key="index" @click="changeDirection(item.prop)">
{
{
item.label}}</el-button>
</el-row>
<el-row>
<el-col :span="2"><span>节点名称:</span></el-col>
<el-col :span="3">
<el-input v-model="nodeName" placeholder="请输入节点名称"></el-input>
</el-col>
<el-col :span="2"><span>父节点选择:</span></el-col>
<el-col :span="3">
<el-select v-model="nodes" multiple collapse-tags style="margin-left: 20px;">
<el-option
v-for="(item,index) in list.nodeInfos"
:key="index"
:label="item.label"
:value="item.id">
</el-option>
</el-select>
</el-col>
<el-col :span="2"><span>图形选择:</span></el-col>
<el-col :span="3">
<el-select v-model="shape" placeholder="请选择">
<el-option v-for="(item,index) in shapes" :key="index"
:label="item.name"
:value="item.shape">
</el-option>
</el-select>
</el-col>
<el-col :span="2"><span>节点颜色选择:</span></el-col>
<el-col :span="1">
<el-color-picker v-model="selColor"></el-color-picker>
</el-col>
<el-col :span="2"><span>线条颜色选择:</span></el-col>
<el