使用dagreD3绘制流程节点（vue3+ts）附全代码，粘贴直接可用

最新推荐文章于 2024-03-22 14:14:01 发布
最新推荐文章于 2024-03-22 14:14:01 发布
阅读量1k 收藏 5
点赞数 6
文章标签： javascript 前端 vue.js edge
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57956183/article/details/134708333
版权

先看效果，点击目标节点，可显示节点上游及下游节点：

首先安装D3依赖：

npm install d3

npm install dagre-d3

话不多说，直接上代码：

<template>
  <div style="display: flex; align-items: center">
    <div style="border: 1px solid #ccc; padding: 20px; width: 1500px">
      <svg class="dagre" width="1500" height="800">
        <g class="container"></g>
      </svg>
    </div>
    <div
      style="border: 1px solid #ccc; padding: 20px; width: 300px; height: 800px"
    >
      id:{{ nodeInfo?.id }} == name:{{ nodeInfo?.nodeName }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import dagreD3 from "dagre-d3";
import * as d3 from "d3";

const nodeInfo = ref();
const nodes = ref();
// 节点数组
nodes.value = [
  {
    id: 0,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWO",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 1,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWS",
    release: "未发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 2,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DIM",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 3,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWO",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 4,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DIM",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 5,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWD",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 6,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWS",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 7,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWO",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 8,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWO",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 9,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWS",
    release: "未发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 10,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWD",
    release: "已发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 11,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "DWS",
    release: "未发布",
    time: "2023-12-12 19:12:12",
  },
  {
    id: 12,
    name: "xxx模型",
    nodeName: "REP_SAJ_SALJAS_SAL",
    type: "ADS",
    release: "未发布",
    time: "2023-12-12 19:12:12",
  },
];
const edges = ref();
// 连线数组
edges.value = [
  {
    start: 1,
    end: 0,
  },
  {
    start: 2,
    end: 1,
  },
  {
    start: 3,
    end: 2,
  },
  {
    start: 4,
    end: 3,
  },
  {
    start: 5,
    end: 3,
  },
  {
    start: 6,
    end: 5,
  },
  {
    start: 7,
    end: 2,
  },
  {
    start: 8,
    end: 7,
  },
  {
    start: 9,
    end: 1,
  },
  {
    start: 9,
    end: 10,
  },
  {
    start: 11,
    end: 10,
  },
  {
    start: 12,
    end: 11,
  },
];
const draw = () => {
  // 创建 Graph 对象
  const g = new dagreD3.graphlib.Graph()
    .setGraph({
      zoom: 1,
      rankdir: "LR", // 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'
      //ranker: "network-simplex",//连线算法
      // nodesep: 70, // 节点之间间距
      // ranksep: 100, // 层与层之间的间距
    })
    .setDefaultEdgeLabel(function () {
      return {};
    });
  const releaseClass = (node) => {
    return node == "已发布" ? "ADS" : "DWD";
  };
  nodes.value.forEach((node) => {
    g.setNode(node.id, {
      id: node.id,
      label: `<foreignObject id='${node.id}'  width='300' height='80'>
        <div id='${
          node.id
        }'  xmlns='http://www.w3.org/1999/xhtml' style='width:300px; height: 80px'>
          <div id='${node.id}' class='nodeBox'>
            <span id='${node.id}' class='nodeA'>${node.name}</span>
            <div id='${node.id}' class='${node.type}'>${node.type}</div>
          </div>
          <div id='${node.id}' class='nodeBox' style='margin-top:5px'>
            <span id='${node.id}' class='nodeA'>${node.nodeName}</span>
            <span id='${node.id}' class='${releaseClass(node.release)}'>${
        node.release
      }</span>
          </div>
          <div id='${node.id}' style='margin-top:5px'>
            <span id='${node.id}' class='nodeA'>最后执行时间：${
        node.time
      }</span>
          </div>
        </div>
        </foreignObject>`, //node.nodeName,
      labelType: "html",
      width: 320,
      height: 86,
      // shape: "rect", //节点形状，可以设置rect(长方形),circle,ellipse(椭圆),diamond(菱形) 四种形状，还可以使用render.shapes()自定义形状
      style: "fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer", //节点样式,可设置节点的颜色填充、节点边框
      labelStyle: "fill: #fff;font-weight:bold;cursor: pointer", //节点标签样式, 可设置节点标签的文本样式（颜色、粗细、大小）
      rx: 5, // 设置圆角
      ry: 5, // 设置圆角
      // paddingBottom: 0,
      // paddingLeft: 0,
      // paddingRight: 0,
      // paddingTop: 0,`
    });
  });

  // Graph添加节点之间的连线
  if (nodes.value.length > 1) {
    edges.value.forEach((edge) => {
      g.setEdge(edge.start, edge.end, {
        //curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
        style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
        arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式，可以设置箭头颜色
        arrowhead: "vee", //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
      });
    });
  }

  // 获取要绘制流程图的绘图容器
  const container = d3.select("svg.dagre").select("g.container");

  // 创建渲染器
  const render = new dagreD3.render();
  // 在绘图容器上运行渲染器绘制流程图
  render(container, g);
  const svg = d3.select("svg.dagre");

  var zoom = d3
    .zoom() // 缩放支持
    .scaleExtent([0.5, 2]) // 缩放范围
    .on("zoom", function (current) {
      container.attr("transform", current.transform);
    });
  svg.call(zoom); // 缩放生效
  let { clientWidth, clientHeight } = svg._groups[0][0];
  let { width, height } = g.graph();

  let initScale = 1;
  svg
    .transition()
    .duration(1000) // 1s完成过渡
    .call(
      zoom.transform,
      d3.zoomIdentity // 居中显示
        .translate(
          (clientWidth - width * initScale) / 2,
          (clientHeight - height * initScale) / 2
        )
        .scale(initScale) // 默认缩放比例
    );

  //  节点点击事件
  let nowNode; // 标记当前高亮节点
  container.on(
    "click",
    (e) => {
      if (
        Number(e.target.__data__) == nowNode ||
        nowNode == Number(e.target.id)
      ) {
        for (let a in g._nodes) {
          g._nodes[a].style =
            "fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
        }
        edges.value.forEach((edge) => {
          g.setEdge(edge.start, edge.end, {
            //curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
            style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
            arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式，可以设置箭头颜色
            arrowhead: "vee", //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
          });
        });
        nowNode = "";
        render(container, g);
        return;
      }
      nodes.value.forEach((item) => {
        console.log(nowNode, item.id, "wwwwwwwww");
        if (
          item.id == Number(e.target.__data__) ||
          item.id == Number(e.target.id)
        ) {
          nowNode = item.id;
          nodeInfo.value = item;
          let edgeList = [
            ...getUpNode(item.id),
            nowNode,
            ...getDownNode(item.id),
          ];
          if (nodes.value.length > 1) {
            edges.value.forEach((edge) => {
              if (
                edgeList.indexOf(edge.start) != -1 &&
                edgeList.indexOf(edge.end) != -1
              ) {
                g.setEdge(edge.start, edge.end, {
                  //curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
                  style: "stroke: red; fill: none; stroke-width: 2px", // 连线样式
                  arrowheadStyle: "fill: red;stroke: red;", //箭头样式，可以设置箭头颜色
                  arrowhead: "vee", //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
                });
              } else {
                g.setEdge(edge.start, edge.end, {
                  //curve: d3.curveStepBefore , //d3.curveBasis, // 设置为贝塞尔曲线
                  style: "stroke: #0fb2cc; fill: none; stroke-width: 2px", // 连线样式
                  arrowheadStyle: "fill: #0fb2cc;stroke: #0fb2cc;", //箭头样式，可以设置箭头颜色
                  arrowhead: "vee", //箭头形状，可以设置 normal,vee,undirected 三种样式，默认为 normal
                });
              }
            });
          }
          for (let a in g._nodes) {
            g._nodes[a].style =
              "fill:#fff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
          }
          g._nodes[nodeInfo.value.id].style =
            "fill: #fff;stroke:#30a8ff;stroke-width: 2px;cursor: pointer";
          getUpNode(item.id).forEach((item) => {
            g._nodes[item].style =
              "fill: #a0cfff;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
          });
          getDownNode(item.id).forEach((item) => {
            g._nodes[item].style =
              "fill: #a3da87;stroke:#a0cfff;stroke-width: 2px;cursor: pointer";
          });
          console.log(nodeInfo.value, g, 6666);
        }
      });
      render(container, g);
    },
    true
  );

  // 获取上游节点函数
  const getUpNode = (id) => {
    let arr = [];
    for (let i = 0; i < edges.value.length; i++) {
      if (edges.value[i].end == Number(id)) {
        arr.push(edges.value[i].start);
        arr.push(...getUpNode(edges.value[i].start));
      }
    }
    return arr;
  };
  // 获取下游节点函数
  const getDownNode = (id) => {
    let arr = [];
    for (let i = 0; i < edges.value.length; i++) {
      if (edges.value[i].start == Number(id)) {
        arr.push(edges.value[i].end);
        arr.push(...getDownNode(edges.value[i].end));
      }
    }
    return arr;
  };
};
onMounted(() => {
  draw();
});

console.log(dagreD3, 2222);
</script>

<style>
.label-container {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.nodeA {
  color: #01579b;
  font-family: HarmonyOS Sans SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}
.nodeBox {
  display: flex;
  justify-content: space-between;
}
.DWO {
  padding: 0 7px;
  color: #67c23a;
  border-radius: 4px;
  border: 1px solid #e1f3d8;
  background: #f0f9eb;
}
.DIM {
  padding: 0 7px;
  color: #909399;
  border-radius: 4px;
  border: 1px solid #e9e9eb;
  background: #f4f4f5;
}
.DWD {
  padding: 0 7px;
  color: #e6a23c;
  border-radius: 4px;
  border: 1px solid #faecd8;
  background: #fcf6ec;
}
.DWS {
  padding: 0 7px;
  color: #f56c6c;
  border-radius: 4px;
  border: 1px solid #fde2e2;
  background: #fef0f0;
}
.ADS {
  padding: 0 7px;
  color: #409eff;
  border-radius: 4px;
  border: 1px solid #d9ecff;
  background: #ecf5ff;
}
</style>

 

海豹先生_
关注
  • 6
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
vue3+vite+ts 仿淘宝放大镜效果
09-17
1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实 有问题可以直接提问
vue利用dagre-d3/dagre实现动态流程图
weixin_45313093的博客
06-26 1816
实现动态流程图效果例如：实时监控项目请求接口数据，这期间数据是从网页到服务器或者到数据库等等的过程，想要一个可以直接清晰了解过程的流程图。
vue使用dagre-d3画流程图
tt1234561009的博客
10-18 3091
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动
最新发布
weixin_44006009的博客
03-22 194
vue echarts流程图（流程线、流程节点），鼠标点击节点后关联echarts以外元素联动。
在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件
狂奔de蜗牛的博客
12-11 4494
项目中想搞定一个流程图，开始使用了阿里的G6，但是G6目前不支持手势，这样就很郁闷了，因为公司的领导都是使用iPad看的，你不支持手势是不行的，后来又想到了百度的echarts，试了试，感觉还不错，手机端也是没问题的，但是用起来不是很好用，每个节点的位置还要自己去设置计算有点麻烦，所以想找个在支持pc和wap并且使用方便的，结果找到了dagre-d3.js，完全满足我的需求啊，就是文档不全，还大多...
vue使用dagre-d3生成流程图
zhengyun1568的博客
04-16 3150
vue文件 <template> <div> <svg width="1000" height="1500"> <g /> <rect /> </svg> </div> </template> <sc...
graphlibrary:现成的dagregraphlib替代品
05-19
图书馆 Graphlibrary是一个JavaScript库，它提供无向和有向多图的数据结构以及可与它们一起使用的算法。 Graphlibrary不是从头开始构建的，它基于 。 它被设计为dagrejs / graphlib的现成替代品。 要了解更多 。 执照 Graphlibrary是根据MIT许可条款获得许可的。 有关详细信息，请参见文件。
Vue中使用dagre-d3绘制流程图实用指南
sleepwalker_1992的专栏
01-09 6420
Vue中使用dagre-d3绘制流程图，并实现缩放拖拽和悬浮提示
vue 流程图
qq_23109373的博客
05-06 3715
仿工作配置流程图
react-flow基础使用及dagre库的使用
https://ligo100.cn 小何博客欢迎访问。
07-11 4908
最近项目中需要用到拓扑图的展示，最开始选用的是antv的拓扑图组件。antv组件虽然此很方便，但是在布局的时候总是会有莫名其妙的bug，然后自己也想法去解决（看前辈经验、官方issue），最后还是不能解决。于是更换了组件库，也就是我们今天的主角：react-flow。React Flow 是一个基于 React 的用于构建可视化流程图和图形编辑器的库。它提供了一个灵活的、可扩展的组件集合，使开发者可以轻松地创建交互式的流程图和图形编辑器应用。
【翻译】Dagre-D3 文档整理和翻译
莫兮的博客
03-22 3041
地址: github Dagre-D3 目录 文章目录dagre-d3设计优先级安装npmBowerBrowser Scripts源代码构建如何使用Darge聚焦渲染例子配置布局生成的图像第三部分例子推荐阅读 dagre-d3 Dagre是一个JavaScript库, 可以更轻易得在客户端布局连接图。此库是dagre的前端子库, 底层使用D3进行渲染。 如果要查看更多详细信息(包含样例和配置在内), 请查看wiki页面。 设计优先级 完全的客户端计算布局。如果客户端布局对你来说并非所需, 可以查看grap
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia
vue3+ts+vite+router+vuex+api请求封装
12-29
后台管理系统脚手架
vue3+ts (源码+笔记+生命周期截图)
02-14
vue3+ts (源码+笔记+生命周期截图)
vue-d3-network：使用d3-force绘制网络图的Vue组件
02-06
vue-d3-网络 Vue组件使用d3-force绘制图形网络 演示版 产品特点 SVG渲染 画布渲染 链接和节点选择 svg <->通过CSS共享画布样式 屏幕截图，导出为svg或png（svg渲染器），导出为png（画布渲染器） 触控支持 安装 npm install vue-d3-network --save 用法 < d3 xss=removed xss=removed xss=removed> import D3Network from 'vue-d3-network' components: {
vue中使用基于d3的dagre-d3.js做一个流程图组件
weixin_45977625的博客
10-10 4067
由于工作中用到了此插件制作简易流程图，以前没用过，特此记录 效果图： 下载 npm install d3 npm install dagre-d3 html <svg width="400" height="253"> <g /> <rect /> </svg> 1.声明数组state（点）和edg（边） 图形中最重要的就是节点和连线（节点之间的联系） list: { //节点 　　nodeInfos: [ 　　　　{ 　　　　
js vuejs dagre-d3绘制流程图实用指南 有向图可视化
南七小僧的学海无涯
07-02 1291
之前有小伙伴问我如何使用 D3 在前端绘制流程图，今天在这里给安排上，与大家分享。明确一点，只要你的数据计算能力足够强，使用原生D3绘制流程图绝对可以的，但是，为了让大家更容易上手，避免重复造轮子，给大家推荐一个专门绘制流程图的 D3 插件 dagre-d3。首先认识下 dagre。dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。
在vue项目中使用dagre-d3流程图
weixin_47319740的博客
09-12 6086
使用步骤
vue3+ts模糊查询代码
05-29
好的，以下是使用Vue3和TypeScript实现模糊查询的示例代码： ```html <template> <div> <input type="text" v-model="searchKey" placeholder="请输入搜索关键词" /> <ul> <li v-for="item in filteredList" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script lang="ts"> import { defineComponent, ref, computed } from 'vue'; import { debounce, filter } from 'lodash'; interface Item { id: number; name: string; } export default defineComponent({ name: 'FuzzySearch', data() { return { list: [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, { id: 4, name: 'pear' }, { id: 5, name: 'grape' }, ] as Item[], searchKey: '' as string, }; }, computed: { filteredList(): Item[] { return filter(this.list, (item: Item) => { return item.name.toLowerCase().indexOf(this.searchKey.toLowerCase()) > -1; }); }, }, }); </script> ``` 这段代码与之前的示例代码类似，但在类型声明和组件定义上有所不同。在组件定义中使用`defineComponent`函数来定义组件，并使用`interface`关键字定义数据对象的类型。在计算属性中，也需要明确指定参数和返回值的类型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

海豹先生_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值