前端使用dagre-d3生成流程图的那些事儿

最新推荐文章于 2024-07-02 18:58:29 发布
最新推荐文章于 2024-07-02 18:58:29 发布
阅读量3k 收藏 4
点赞数 1
分类专栏： C#基础类

这两天遇到这样一个需求，在前端页面展示流程图，我之前没有做过类似的需求，就来找万能的度娘 了。流程图根据需求不同，展示的形式有所不同，但是本质还是一致的。经过百度搜索，我找到了几种方案，简单给大家介绍一下：

1.做能拖拽和编辑的流程图

推荐使用https://jsplumbtoolkit.com/demos.html,这个网站专门用于生成流程图，基本能满足你的所有需求

2.展示流程图，不对流程图做任何操作

      （1）在html页面中使用dagre-d3，生成展示型流程图


<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        g.type-current>rect {

            fill: #1E9FFF;

        }

 

        g.type-success>rect {

            fill: green;

        }

 

        g.type-fail>rect {

            fill: red;

        }

 

        text {

            font-weight: 300;

            font-family: "Helvetica Neue", Helvetica, Arial, sans-serf;

            font-size: 14px;

        }

 

        .node rect {

            stroke: #999;

            fill: #fff;

            stroke-width: 1.5px;

        }

 

        .edgePath path {

            stroke: #333;

            stroke-width: 1.5px;

        }

    </style>

</head>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="http://cpettitt.github.io/project/dagre-d3/v0.3.0/dagre-d3.min.js"></script>

<script src=" http://d3js.org/d3.v3.min.js "></script>

 

<body>

    <svg id="svg-canvas" width=700 height=300></svg>

</body>

<script>

 

    var dataFlow = [{

        id: 0,

        label: '事项受理',

        status: 'success',

        target: 1,

        back_target:null

    },{

        id: 1,

        label: '初审',

        status: 'success',

        target: 2,

        back_target:null

    },{

        id: 2,

        label: '初审回复',

        status: 'success',

        target: 3,

        back_target:null

    },{

        id: 3,

        label: '事情打回',

        status: 'fail',

        target: 4,

        back_target: 1

    },{

        id: 4,

        label: '事项办结',

        status: 'current',

        target: null,

        back_target:null

    },{

        id: 5,

        label: '候审补正',

        status: 'done',

        target: null,

        back_target:null

    }]

    // Create the input graph

    var g = new dagreD3.graphlib.Graph()

        .setGraph({})

        .setDefaultEdgeLabel(function () { return {}; });

 

    dataFlow && dataFlow.map((item, i) =>{

        g.setNode(item.id, {

            label: item.label,

            class: "type-" + item.status,

            // id: "status" + i

        });

         // Set up edges, no special attributes.

        if(item.target && !item.back_target) {

            g.setEdge(item.id,item.target, {})

        }else if(item.back_target) {

            console.log(1111111)

            g.setEdge(item.id,item.target, {})

            g.setEdge(item.id,item.back_target, {})

        }

    })

  

    g.nodes().forEach(function (v) {

        var node = g.node(v);

        // Round the corners of the nodes

        node.rx = node.ry = 5;

    });

 

    // Create the renderer

    var render = new dagreD3.render();

 

    // Set up an SVG group so that we can translate the final graph.

    var svg = d3.select("svg"),

        svgGroup = svg.append("g");

 

    // Run the renderer. This is what draws the final graph.

    render(d3.select("svg g"), g);

 

    var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;

    svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");

    svg.attr("height", g.graph().height + 40);

</script>

 

</html>

 

 在html文件中，通过改变节点的class名来显示不同的颜色，展示流程到达的节点

（2）在react项目中使用 dagre-d3生成流程图

   在html文件中国我们可以直接通过script标签引入d3，dagre-d3的代码文件，但是在react项目中，我们就不能这样直接引入了，首先要先安装d3，dagre-d3的依赖包，css文件也要单独引入


import React, { Component } from 'react';

import * as d3 from 'd3';

import './Demo.css';

import * as dagreD3 from 'dagre-d3';

 

class Demo extends Component {

    constructor(props) {

        super(props);

        this.state = {

            dataFlow: [{

                id: 0,

                label: '事项受理',

                status: 'success',

                target: 1,

                back_target: null

            }, {

                id: 1,

                label: '初审',

                status: 'success',

                target: [3],

                back_target: null

            }, {

                id: 2,

                label: '初审回复',

                status: 'success',

                target: 3,

                back_target: null

            }, {

                id: 3,

                label: '事情打回',

                status: 'fail',

                target: 4,

                back_target: 1

            }, {

                id: 4,

                label: '事项办结',

                status: 'current',

                target: null,

                back_target: null

            }, {

                id: 5,

                label: '候审补正',

                status: 'done',

                target: null,

                back_target: null

            }]

        }

    }

 

    componentDidMount() {

        this.renderDag();     

    }

 

    renderDag() {

        const { dataFlow } = this.state;

        // // Create the input graph

        var g = new dagreD3.graphlib.Graph()

            .setGraph({})

            .setDefaultEdgeLabel(function () { return {}; });

 

        dataFlow && dataFlow.map((item, i) => {

            g.setNode(item.id, {

                label: item.label,

                class: "type-" + item.status,

            });

            if (item.target && !item.back_target) {

                    g.setEdge(item.id, item.target, {})

            } else if (item.back_target) {

                g.setEdge(item.id,item.target, {})

                g.setEdge(item.id,item.back_target, {})

            }

        })

 

        g.nodes().forEach(function (v) {

            var node = g.node(v);

            // Round the corners of the nodes

            node.rx = node.ry = 5;

        });

 

        // // Create the renderer

        var render = new dagreD3.render();

 

        // // Set up an SVG group so that we can translate the final graph.

        var svg = d3.select("svg"),

            svgGroup = svg.append("g");

 

        // // Run the renderer. This is what draws the final graph.

        render(d3.select("svg g"), g);

        console.log(svg,'111', svgGroup)

        var xCenterOffset = (svg.attr("width") - g.graph().width) / 2;

        svgGroup.attr("transform", "translate(" + xCenterOffset + ", 20)");

        svg.attr("height", g.graph().height + 40);

    }

    //获取dom节点

    setNodeTree = (nodeTree) => {

        this.nodeTree = nodeTree;

        this.nodeTree.background = "yellow";

    }

    //获取dom节点

    setNodeTreeInner = (nodeTreeInner) => {

        this.nodeTreeInner = nodeTreeInner;

    }

 

    render() {

        return (

            <svg ref={this.setNodeTree} id="svg-canvas"  width= '700px' height='300px' >

                <g ref={this.setNodeTreeInner} />

            </svg>

        )

    }

}

 

export default Demo;
 

以上就是我在工作中的一点小心得，若有错误欢迎指正，希望可以和大家多多交流，提升技术。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

------------------ 
作者：娜娜的小幸福 
来源：CSDN 
原文：https://blog.csdn.net/nn1523713/article/details/87722959 
版权声明：本文为博主原创文章，转载请附上博文链接！

 

 

 

 

 

 

 

 

 

 

 

Andrewniu
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp App使用dagre-d3实现流程图
zmx781284440的博客
06-03 1237
2.由于目前uniapp官方不支持svg组件，安装SVG.js。(通过SVG.js 构造svg实例)1.首先安装d3和dagre-d3插件（因为dagre-d3基于d3实现的，所有要一起安装）3.利用svg.js构造一个实例。4.接下来看整体demo。
[简易版]有向无环图(DAG)前端可视化
weixin_34237596的博客
11-25 3913
首发简书, 此为合并整理版.代码链接放在文末 最近公司需要做一个内部使用的机器学习平台,其中有一部分需求可以抽象为有向无环图,一边踩坑一边把研发过程记录了一下(其实是搜不到高耦合业务的成品轮子
uniapp app实现流程图功能
zmx781284440的博客
06-03 831
app流程图
前端vue3项目dagre-d3基础配置项及流程图组件示例（包括安装依赖）
最新发布
m0_59603076的博客
07-02 1339
dagre-d3安装使用，有基础配置项说明，流程图组件示例，代码直接可复用
前端代码动态生成 审批流程图、流程图
qq_43780814的博客
09-18 4810
数据 数组 弹窗页面代码 其中使用弹性盒子反转数组，也可以在处理数组的时候反转，当时没想到 左右箭头（.arrowToLeft和.arrowToRight）用是否单偶数行判断，每一行的最后一个用id取余控制，开始和结束不要箭头 xt-dialog( title="流程视图" ref="viewDialogRef" class="dialogRef" :showfooter="false" top="5vh" width="954px" append-to-body ) .
Flowable 快速入门教程：前端展示流程图
乐之终曲
03-05 7625
Flowable 快速入门教程：流程图展示后端前端效果图 后端 这里流程图就不做高亮处理了 获取流程图 InputStream 将 InputStream 转为 byte[] 字节数组 对数组进行 Base64 编码处理，将结果返回前端 /** * 获取流程图 * @param processDefinedId */ @GetMapping(value = "/getFlowDiagra...
流程图_dagre-d3流程图_dagre-d3_DEMO_
10-03
在"流程图_dagre-d3流程图_dagre-d3_DEMO_"这个DEMO中，我们可以预见到包含了一段简单的代码，演示了如何使用dagre-d3创建一个流程图。可能的代码结构会展示如何初始化图，添加节点和边，然后利用dagre-d3的布局和D3...
vue+dagre-d3前端流程图开发demo
08-12
1、一个支持增加节点、删除节点、修改节点的流程图，增加节点可选择并行、串行、会签、下一节点并行等状态； 2、支持设置条件、删除条件、查看条件； 3、可直观显示已完成的节点和不可查看的节点，真正做到了流程...
基于dagre-d3自动画流程图的demo
04-30
然后，dagre-d3库会自动计算节点的位置，并使用D3.js来生成SVG元素显示流程图。 流程图的自动生成对许多应用场景非常有用，如软件设计、工作流展示、数据流程分析等。dagre-d3通过自动化布局，极大地简化了开发流程...
dagre-d3-react:dagre-d3软件包的React组件
05-02
Chrome，Firefox，Safari屏幕截图安装用法更新rankdir prop已在0.2.0版中进行了更新，现在已由config代替，可以在找到新选项import DagreGraph from 'dagre-d3-react'ReactDOM . render (< div>< DagreGraphnodes...
包含 dagre-d3.js d3.js 最新版 亲测可用
12-01
总的来说，这个压缩包提供了创建网页流程图所需的基本工具，适用于那些希望在项目中实现数据可视化的开发者。无论是用于数据报告、教学演示还是项目管理，D3.js和dagre-d3的结合都能提供强大的支持。
【echarts】地图模块，展示一个动态流程图1.0（简单demo）
arminc的博客
08-08 5691
使用地图模块，展示一个动态流程图（简单demo） 1.先上效果图： 2.代码： html: &amp;lt;!-- ec --&amp;gt; &amp;lt;script src=&quot;../script/lib/echarts4.0/echarts.js&quot; type=&quot;text/javascript&quot;&amp;gt;&amp;lt;/script&amp;gt; &
dagre/dagre-d3绘制流程图
high32的博客
06-05 8548
dagre/dagre-d3绘制流程图概念步骤知识点配置项gragh 配置node 配置edge 配置交互拖拽缩放鼠标悬停 tootip参考 概念 dagre 是专注于有向图布局的 javascript 库，由于 dagre 仅仅专注于图形布局 #F44336，需要使用其他方案根据 dagre 的布局信息来实际渲染图形，而 dagre-d3 就是 dagre 基于 D3 的渲染方案。 dagre: https://github.com/dagrejs/dagre dagre-d3: https://gith
html流程svg动画,SVG实现流程动态效果
weixin_35719518的博客
06-05 710
需求介绍：监控页面在不同的设备上可以看到工艺流程的动态，哪些设备在工作，进行到了哪个环节...工艺流程静态图如下实现思路分析可以通过 div 的方式 拼凑 一张图，然后 js 代码控制不同的 div 部件进行颜色变化。可以通过 canvas 的方式绘制整张图，然后对画布内的元素进行控制。可以找个第三方库，自定义形状 组合 一张图出来，然后进行控制。可以通过 svg 图的方式展示内容，然后对 svg...
dagre-d3流程图
lyqhn2012的专栏
05-15 1430
<!doctype html> <meta charset="utf-8"> <title>Dagre D3 Demo: Arrows</title> <link rel="stylesheet" href="demo.css"> <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script> <script src="../dagre-d
使用dagreD3绘制流程节点（vue3+ts）附全代码，粘贴直接可用
qq_57956183的博客
11-30 1590
【代码】使用dagreD3绘制流程节点（vue3+ts）附全代码，粘贴直接可用。
使用dagre-d3做一个dag图（关系图）
weixin_34384681的博客
04-09 801
dagre-d3插件github地址：github.com/dagrejs/dag…简易版github网址: github.com/xuhuihui/sv…csdn引入:<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script> <script src="../dist/dagre-d3....
前端 3d开发怎么操作，什么流程？
12-27 2264
我们都知道现今社会复合型人才是企业刚需，只会一项本领难以在企业中立足，即便是前端工程师，如果你只会敲代码改网页也是不行了，要多方面拓展自己的才能。比如研究可视化方向的3D开发。这就需要借助可视化pass平台平台来完成。 ThingJS 是物联网可视化PaaS开发平台，帮助物联网开发商轻松集成 3D 可视化界面。ThingJS 名称源于 物联网Internet of Things (IoT)中的 ...
JointJS动态流程图
热门推荐
前端恶霸
05-28 1万+
    最近公司有个导航项目需要做个流程图比较复杂的那种，作为一个前端小菜也是很蒙的，要求就两条一：动态加载流程图；二：动态连线；这两点要求也是难住了一阵呢，最后选择了jointJS，选着原因官网API很详细，代码量比较少封装起来使用也很便捷，进阶文档基础略过，没接触过得可以去在官网先学习一下，废话不多少直接上硬菜。     我这块写了两个一个是节点型流程图和关系行流程图。（源码在下一篇文章可以...
dagre-d3自定义流程图节点
06-10
要自定义 Dagre-D3 流程图节点，您需要了解以下几个方面： 1. 节点数据结构：在 Dagre-D3 中，节点通常是一个 JavaScript 对象，包含一些必要的属性，如节点的 ID、宽度、高度、位置等。您可以根据您的需求来定义自己的节点数据结构。 2. 节点渲染：Dagre-D3 通过 SVG 来渲染节点。您可以使用 SVG 的各种元素（如 rect、circle、path 等）来定义您的节点外观和样式。您可以使用 Dagre-D3 提供的一些默认样式，也可以根据自己的需求来定义自己的样式。 3. 节点交互：如果您需要为节点添加交互功能，例如鼠标悬停、点击等，您可以使用 D3.js 提供的事件处理函数来实现。您可以在节点元素上绑定事件处理函数，并在函数中实现您的逻辑。 下面是一个简单的自定义节点的示例代码： ```javascript // 定义节点数据结构 var node = { id: 'node1', width: 80, height: 40, x: 100, y: 100 }; // 渲染节点 var svg = d3.select('svg'); var g = svg.append('g'); var rect = g.append('rect') .attr('width', node.width) .attr('height', node.height) .attr('x', node.x) .attr('y', node.y) .attr('fill', '#ccc'); // 添加节点交互 rect.on('mouseover', function() { d3.select(this).attr('fill', '#f00'); }).on('mouseout', function() { d3.select(this).attr('fill', '#ccc'); }); ``` 在这个示例中，我们首先定义了一个简单的节点数据结构，然后使用 SVG 的 rect 元素来渲染节点。最后，我们为 rect 元素添加了鼠标悬停和鼠标移出事件，以改变节点的填充颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值