2021-08-05 Vue+D3实现一个动态的流程图

最新推荐文章于 2024-07-02 18:58:29 发布

咪儿的小甜豆

最新推荐文章于 2024-07-02 18:58:29 发布

阅读量3.3k

点赞数 4

文章标签： vue d3.js

本文链接：https://blog.csdn.net/mier_pig/article/details/119414882

版权

标题 Vue+D3实现一个动态的流程图

解决了D3v6传参的一些问题（鼠标经过获取不到节点等）
能够像动画一样自动播放的流程图
根据数据自动生成节点，不需要自己手写节点的位置
附上D3.js官网链接:https://d3js.org/

<template>
  <div>
    <div id="tooltip" class="hidden">
      <p><span id="tooltip_value"></span></p>
    </div>
    <svg width="1000" height="1500">
      <g />
    </svg>
    <button @click="startType()" :disabled="dis">
      {
   {
    btnMsg }}
    </button>
  </div>
</template>

<script>
//D3和引入
import * as d3 from "d3";
import dagreD3 from "dagre-d3";
export default {
   
  data() {
   
    return {
   
      list: {
   
        nodeInfos: [
          {
   
            id: "1",
            label: "start
          },
          {
   
            id: "2",
            label: "step2",
            state: ""
          },
          {
   
            id: "3",
            label: "step2"
          },
          {
   
            id: "4",
            label: "step2"
          },
          {
   
            id: "5",
            label: "结束"
          },
          {
   
            id: "6",
            label: "结束"
          },
          {
   
            id: "7",
            label: "结束"
          },
          {
   
            id: "8",
            label: "结束-审核中"
          },
          {
   
            id: "9",
            label: "9"
          },
          {
   
            id: "10",
            label: "10"
          },
    
        edges: [
          {
   
            source: "1",
            target: "2",