G6框架Dagre流程图第三个自左向右的 Dagre 上对齐改造，对齐结点和边添加样式，并添加修改节点和展示结点详细信息交互

最新推荐文章于 2024-05-26 22:37:49 发布
最新推荐文章于 2024-05-26 22:37:49 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： vue+antd 文章标签： 流程图 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoyan_v587/article/details/126470481
版权

​​在这里插入图片描述

标题修改具体项

  • 设置结点的样式
  • 设置边的样式
  • 添加修改结点名称功能
  • 添加展示结点详细信息功能

参考链接

  • 基本图形：https://g6.antv.vision/zh/examples/net/dagreFlow#lrDagreUL
  • 展示结点详细信息功能：https://g6.antv.vision/zh/examples/tool/tooltip#tooltipClick
  • 修改结点名称功能：https://g6.antv.vision/zh/examples/interaction/label#update

完整代码(直接建一个html文件拷进去就能用)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tutorial Demo</title>
  </head>
  <body>
    <!-- 图的画布容器 -->
    <div id="container"></div>

    <!--  引入 G6  -->
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.3.11/dist/g6.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>
      // 定义数据源
      const data = {
        // 点集
        nodes: [
          {
            id: '0',
            label: '硅材料',
            style: {
              lineDash: [6],
            },
            description: ['text1','text2','text3','text4',],
          },
          {
            id: '1',
            label: '光伏级单晶硅片',
            description: ['text1','text2','text3','text4',],
          },
          {
            id: '2',
            label: '组件',
            description: ['text1','text2','text3','text4',],
          },
          {
            id: '3',
            label: '半导体硅片',
            style: {
              lineDash: [6],
            },
            description: ['text1','text2','text3','text4',],
          },
          {
            id: '4',
            label: 'IGBT芯片',
            style: {
              fill: '#00FF00', //填充颜色
            },
          },
          {
            id: '5',
            label: 'IGBT模块1700V及以上',
            style: {
              fill: '#00FF00', //填充颜色
            },
          },
          {
            id: '6',
            label: 'IGBT模块1700V及以下',
          },
          {
            id: '7',
            label: '变流器',
          },
          {
            id: '8',
            label: '换流阀',
          },
          {
            id: '9',
            label: '中车',
          },
          {
            id: '10',
            label: '轨道交通',
            type: 'rect',
          },
          {
            id: '11',
            label: '智能电网',
            type: 'rect',
          },
          {
            id: '12',
            label: '逆变器',
            style: {
              lineDash: [6],
            },
          },
          {
            id: '13',
            label: '电机控制器',
          },
          {
            id: '14',
            label: '新能源汽车',
            type: 'rect',
          },
        ],
        // 边集
        edges: [
          {
            source: '0',
            target: '1',
            description: ['text1','text2','text3','text4',],
          },
          {
            source: '1',
            target: '2',
            description: ['text1','text2','text3','text4',],
          },
          {
            source: '0',
            target: '3',
            style: {
              lineDash: [6],
            },
            description: ['text1','text2','text3','text4',],
          },
          {
            source: '3',
            target: '4',
            style: {
              lineDash: [6],
            },
          },
          {
            source: '4',
            target: '5',
            style: {
              lineDash: [3],
            },
          },
          {
            source: '4',
            target: '6',
          },
          {
            source: '5',
            target: '7',
            style: {
              lineDash: [6],
            },
          },
          {
            source: '5',
            target: '8',
            style: {
              lineDash: [6],
            },
          },
          {
            source: '7',
            target: '9',
          },
          {
            source: '9',
            target: '10',
          },
          {
            source: '8',
            target: '11',
          },
          {
            source: '6',
            target: '12',
            style: {
              lineDash: [6],
            },
          },
          {
            source: '12',
            target: '13',
            style: {
              lineDash: [6],
            },
          },
          {
            source: '13',
            target: '14',
          },
        ],
      };

      // 定义提示文本框--结点详细信息描述
      const tooltip = new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        // v4.2.1 起支持配置 trigger，click 代表点击后出现 tooltip。默认为 mouseenter
        trigger: 'dbclick',
        // the types of items that allow the tooltip show up
        // 允许出现 tooltip 的 item 类型
        itemTypes: ['node', 'edge'],
        // custom the tooltip's content
        // 自定义 tooltip 内容
        getContent: (e) => {
          const outDiv = document.createElement('div');
          outDiv.style.width = 'fit-content';
          //outDiv.style.padding = '0px 0px 20px 0px';
          outDiv.innerHTML = `
            <h4>Custom Content</h4>
            <ul>
              <li>Label: ${e.item.getModel().description[0]}</li>
              <li>Label: ${e.item.getModel().description[1]}</li>
              <li>Label: ${e.item.getModel().description[2]}</li>
              <li>Label: ${e.item.getModel().description[3]}</li>
            </ul>`;
          return outDiv;
        },
      });

      // 定义修改文本框--结点名称修改
      const tooltip1 = new G6.Tooltip({
        offsetX: 10,
        offsetY: 10,
        // v4.2.1 起支持配置 trigger，click 代表点击后出现 tooltip。默认为 mouseenter
        trigger: 'click',
        // the types of items that allow the tooltip show up
        // 允许出现 tooltip 的 item 类型
        itemTypes: ['node', 'edge'],
        // custom the tooltip's content
        // 自定义 tooltip 内容
        getContent: (e) => {
          const outDiv = document.createElement('div');
          outDiv.style.width = 'fit-content';
          //outDiv.style.padding = '0px 0px 20px 0px';
          outDiv.innerHTML = `
            <input type="text" id="newLabel" value="${e.item.getModel().label}"/>
            <button type="submit" id="btn_submit" οnclick="btnAction()">确定</button>`;
          return outDiv;
        },
      });

      const container = document.getElementById('container');
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;
      // 创建 G6 图实例
      const graph = new G6.Graph({
        container: 'container', // 指定图画布的容器 id，与第 9 行的容器对应
        // 画布宽高
        // width: 800,
        // height: 500,
        width,
        height,
        fitView: true,  //自适应布局
        plugins: [tooltip,tooltip1],   //两个文本插件
        modes: {
          default: ['drag-canvas', 'drag-node'],
          edit: ['click-select'],
        },
        layout: {
          type: 'dagre',
          rankdir: 'LR',
          align: 'UL',
          controlPoints: true,
          nodesepFunc: () => 1,
          ranksepFunc: () => 1,
        },
        defaultNode: {
          size: [120, 60],
          type: 'ellipse',
          style: {
            lineWidth: 0.5,
            stroke: '#000000', //边框颜色
            fill: '#FFFFFF', //填充颜色
          },
        },
        defaultEdge: {
          type: 'polyline',
          size: 1,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 0,0 L 8,4 L 8,-4 Z',
              fill: '#e2e2e2',
            },
            radius: 20,
          },
        },
      });
      // 读取数据
      graph.data(data);
      // 渲染图
      graph.render();

      //针对结点和边的详细信息提示
      graph.on('node:mouseenter', (e) => {
        graph.setItemState(e.item, 'active', true);
      });
      graph.on('node:mouseleave', (e) => {
        graph.setItemState(e.item, 'active', false);
      });
      graph.on('edge:mouseenter', (e) => {
        graph.setItemState(e.item, 'active', true);
      });
      graph.on('edge:mouseleave', (e) => {
        graph.setItemState(e.item, 'active', false);
      });

      //针对结点的名称修改
      var cur_e;
      graph.on('node:click', (e) => {
        cur_e = e;
      });

      //针对结点的名称修改确定按钮调用函数
      function btnAction(){
        console.log($("#newLabel").val());
        console.log(cur_e);
        graph.updateItem(cur_e.item, {
          label: $("#newLabel").val(),
        });
      }
      
      if (typeof window !== 'undefined')
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
      };
    </script>
  </body>
</html>
睡到自然醒♔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
流程图布局在项目中的实践
有生灭心,有相续心
09-21 2826
不论任何对流程图的布局的美化效果，在研发的角度来说都是对流程上的点、线坐标进行调整，但是最大的问题可能是也不知道基于什么规则去调整。如果产品已经给出来清晰的规则，事情往往比较简单，我们只需要按照这个规则实现自己的布局算法即可。可大多数情况下还是需要我们研发自己去调研，从已开源的项目里面找到合适的布局算法，然后结合我们当前项目的流程图框架来实现。目前上有部分流程图框架已经自带了一些布局算法，但是在实际项目中，还有比较多的细节需要处理，例如让布局后的连线排布更加合理、某些节点位置保证相对不变等。
探索DagreJS：一款强大的图布局库
gitblog_00054的博客
03-25 885
探索DagreJS：一款强大的图布局库 项目地址:https://gitcode.com/dagrejs/graphlib 项目简介 DagreJS 是一个JavaScript库，专门用于构建和布局有向图（Directed Acyclic Graphs, DAG），并提供了一种优雅的方式来可视化复杂的逻辑关系。它依赖于另一个核心库 Graphlib，该库提供了表示和操作图的强大功能。 技术分析 G...
阿里G6漂亮流程图绘制
02-03
利用阿里G6实现流程图在线编辑功能，支持人员、部门等选择。
dagre：JavaScript的有向图布局
02-28
dagre-JavaScript的图形布局 Dagre是一个JavaScript库，可轻松在客户端上布置有向图。 有关更多详细信息，包括示例和配置选项，请参阅我们的 。 执照 dagre是根据MIT许可条款获得许可的。 有关详细信息，请参见LICENSE文件。
vue+antvg6流程图
最新发布
weixin_41752213的博客
05-26 294
vue+antvg6流程图
「AntV」基于AntV G6 实现 数据血缘有序分组dag链路图排版
知无涯
01-11 5984
数据链路图是数据开发产品中的一个核心特性，也是产品核心竞争力之一。对此感兴趣的可以多花一段时间做一个专题研究，也欢迎私下找我讨论。最后希望大家都能在滴普得到成长，做出自己的杰出的作品。要相信功夫不负有心人✌。
VEdtior 默认提供了基于 Dagre 的有向图布局
feidododekefu的博客
11-09 317
VEdtior 默认提供了基于 Dagre 的有向图布局
基于antv x6流程自定义设计并自适应排版
琳小的博客
04-28 2677
其中排版的要点是：
画布 Graph antv-x6在vue中的使用，graph函数动态添加节点和边
可控的事情要谨慎，不可控的事情要乐观。
01-02 4221
参考antv-x6官网： 画布 Graph 参考官网： 图表案例 实现效果图 请求后端返回的数据格式(json)： { "data": { "nodes": [ { "id": "00001022", "name": "xxxxxxx公共服务" }, { "id": "00002001",
Vuex和antv/g6实现在线绘制分析流程图功能演示Demo
09-07
基于vue框架实现流程图绘制在项目中实际是一个复杂的应用，但是因为有很多算法都是和项目中业务相关不一定符合其他小伙伴的实际应用情况并且项目存在保密机制不方便全部分享出来，所以本Demo中仅抽取最基础的部分...
GGEditor基于G6和React的可视化图编辑器可用于画流程图思维导图
08-10
1. **图模型与React组件**：GGEditor使用React组件来表示图中的节点和边，每个组件都可以自定义样式和行为。 2. **交互逻辑**：G6的交互能力被封装成React组件的事件处理函数，通过props传递给子组件，实现图的交互...
树形菜单,可以拖拽，可修改层级，名称、添加节点、切换节点
03-22
标题中的“树形菜单,可以拖拽，可修改层级，名称、添加节点、切换节点”描述的是一个基于前端UI技术实现的功能丰富的交互式菜单系统。这个系统具备以下关键知识点： 1. **树形结构**：在计算机科学中，树形结构是一...
vue3+antv x6+tsx 制作自定义流程图
09-23
在本文中，我们将深入探讨如何使用Vue3、AntV X6和TSX技术栈来创建一个自定义的流程图。这个项目旨在利用这些强大的工具，提供一个可扩展且用户友好的流程图编辑环境。 首先，Vue3是Vue.js框架的最新版本，它引入了...
antv G6
viviliving的专栏
12-04 4637
决策树 决策树 大规模图下钻式探索 大规模图下钻式探索 知识图谱树图 知识图谱树 自定义流向图 自定义流向图 图表决策 图表决策 圣诞推文可视化 圣诞推文可视化 聚类的折叠/扩展 聚类的折叠/扩展 地铁线路图 地铁线路图 美国航线边绑定 美国迁徙图边绑定 澳大利亚大火 澳大利亚大火 紧凑树 紧凑树 至上而下的紧凑树
antV G6 节点的配置方式总结
热门推荐
天空之上有座城
01-14 1万+
antV G6 节点的配置方式总结 配置节点的方式 配置节点的方式有四种：实例化图时全局配置，在数据中动态配置，使用 graph.node(nodeFn) 函数配置，自定义节点时加入配置项参数。 这几种配置方法可以同时使用， 优先级：使用 graph.node(nodeFn) 配置 > 数据中动态配置 > 实例化图时全局配置 > 自定义节点时配置 即有相同的配置项时， 优先级高的方式将会覆盖优先级低的。 ⚠️ 注意: 除 id、label 应当配置到每个节点数据中外， 其余的 节点的通用属
antv/g6之图布局及切换布局
study_way的博客
11-05 2572
节点间距（px）的回调函数，通过该参数可以对不同节点设置不同的节点间距。g6支持使用 Dagre 布局来自动排列图中的节点，以形成层次结构。层次布局将自动排列节点和边，以形成层次结构，其中节点和边的位置由布局算法决定。当实例化图时没有指定布局方法，且数据中也不存在位置信息时，G6 将自动使用 Random 布局。Circular（环形）布局是一种图形布局算法，用于将图中的节点排列在一个环形的方式中。‘RL’：从右至左布局。方法允许你切换布局类型，并重新排列节点和边，以便在当前图表上应用新的布局。
推荐 Dagre：强大的图形布局库
gitblog_00012的博客
04-09 634
推荐 Dagre：强大的图形布局库 项目地址:https://gitcode.com/cpettitt/dagre Dagre 是一个高效的图和有向无环图（DAG）布局库，由 JavaScript 编写，并且在浏览器和 Node.js 环境中都能运行。它的主要目标是帮助开发者轻松地在 web 应用中创建美观、易读的图表，特别适合于数据可视化、流程图和状态机等场景。 项目简介 Dagre 提供了一...
vue使用antv-x6 绘制流程图DAG图
贵林之恋的博客
11-01 1732
2.x 的写法： 注册vue组件节点。
antv x6将节点拖动到两连线的节点中，自动插入
qq_41994014的博客
07-30 1050
antv x6将节点拖动到两连线的节点中，自动插入。
ant/g6流程图通过点击事件为node元素添加combo
06-10
好的，我理解了你的问题。针对你的问题，我可以给出以下的解答： 首先，我们需要明确一下什么是 Ant G6 和 Combo。Ant G6 是一个基于 G6 开发的图可视化引擎，而 Combo 则是 G6 中的一种元素类型，它可以将多个节点组合成一个整体。 在 Ant G6 中，我们可以通过监听节点的点击事件来为节点添加 Combo。具体的实现步骤如下： 1. 在初始化 G6 图实例时，需要开启 Combo 功能： ```javascript const graph = new G6.Graph({ container: 'container', ... enabledCombo: true, ... }); ``` 2. 监听节点的 click 事件： ```javascript graph.on('node:click', (evt) => { const { item } = evt; const model = item.getModel(); const comboId = `combo-${model.id}`; // 判断该节点是否已经被包含在某个 Combo 中 const comboItem = graph.findById(comboId); if (comboItem) { // 如果已经被包含，则将节点从 Combo 中移除 graph.updateCombo(comboId, [item]); } else { // 如果未被包含，则创建一个新的 Combo 并将节点加入其中 graph.createCombo({ id: comboId, padding: 10, children: [item], }); } }); ``` 在上面的代码中，我们首先获取到被点击的节点的 model，然后根据节点的 id 创建一个对应的 Combo id。接着，我们在图中查找是否已经存在该 Combo，如果存在，则将该节点从 Combo 中移除；如果不存在，则创建一个新的 Combo 并将该节点加入其中。 以上就是通过点击事件为节点添加 Combo 的具体步骤。希望这个回答能够帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值