d3.js 基于vue流程控制图

最新推荐文章于 2024-06-14 16:08:36 发布

wcyyoyi

最新推荐文章于 2024-06-14 16:08:36 发布

阅读量1.3k

点赞数 2

分类专栏： d3.js vue js 文章标签： javascript vue.js d3.js

本文链接：https://blog.csdn.net/wcyyoyi/article/details/120419622

版权

d3.js 基于vue流程控制图

效果展示
package.json 依赖下载(注意版本)
html
js
css

效果展示

在这里插入图片描述
参考文章：(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-col :span=