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

最新推荐文章于 2024-08-08 07:40:54 发布
最新推荐文章于 2024-08-08 07:40:54 发布
阅读量1w 收藏 27
点赞数 8
分类专栏： d3 文章标签： js 流程图 dagre-d3 前端 d3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nn1523713/article/details/87722959
版权

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

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;

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

娜娜的小幸福
关注
专栏目录
dagre-d3:Dagre基于D3的渲染器
05-23
dagre-d3-dagre的基于D3的渲染器 是一个JavaScript库，可轻松在客户端上布置有向图。 dagre-d3库充当dagre的前端，使用提供实际渲染。 有关更多详细信息，包括示例和配置选项，请参阅我们的 。 执照 dagre-d3是根据MIT许可条款获得许可的。 有关详细信息，请参见LICENSE文件。
vue使用dagre-d3生成流程图
zhengyun1568的博客
04-16 3236
vue文件 <template> <div> <svg width="1000" height="1500"> <g /> <rect /> </svg> </div> </template> <sc...
dagre-d3 开源项目教程
最新发布
gitblog_00629的博客
08-08 381
dagre-d3 开源项目教程 dagre-d3A D3-based renderer for Dagre项目地址:https://gitcode.com/gh_mirrors/da/dagre-d3 项目介绍 dagre-d3 是一个基于 D3 的渲染器，用于 Dagre。Dagre 是一个 JavaScript 库，用于在客户端轻松布局有向图。dagre-d3 库作为 Dagre 的前端，使...
Vue中使用dagre-d3绘制流程图实用指南
sleepwalker_1992的专栏
01-09 7245
Vue中使用dagre-d3绘制流程图，并实现缩放拖拽和悬浮提示
dagre/dagre-d3绘制流程图
high32的博客
06-05 8727
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
vue使用dagre-d3画流程图
tt1234561009的博客
10-18 4396
edges用来存储线条数据，start是开始节点，end是结束节点，label可以给线条命名。还可以使用render.shapes()自定义形状。需求：根据表格中的工序名称和上工序生成流程图。2）circle,ellipse(椭圆)数据处理，把表格数据转变成节点和线条数据。3）diamond(菱形)这世界很喧嚣，做你自己就好。1）rect(长方形)
【翻译】Dagre-D3 文档整理和翻译
莫兮的博客
03-22 3347
地址: github Dagre-D3 目录 文章目录dagre-d3设计优先级安装npmBowerBrowser Scripts源代码构建如何使用Darge聚焦渲染例子配置布局生成的图像第三部分例子推荐阅读 dagre-d3 Dagre是一个JavaScript库, 可以更轻易得在客户端布局连接图。此库是dagre的前端子库, 底层使用D3进行渲染。 如果要查看更多详细信息(包含样例和配置在内), 请查看wiki页面。 设计优先级 完全的客户端计算布局。如果客户端布局对你来说并非所需, 可以查看grap
流程图_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的结合都能提供强大的支持。
dagre-d3 基于d3.js v3版本以上
czy279470138的博客
05-15 1872
基于d3 v3 和 v4 的变化 https://github.com/dagrejs/dagre-d3/commit/ebbb84f03bd169061f40d7a1df82cb3b51860187 弹窗 tipsy.js tipsy.css https://blog.csdn.net/czy279470138/article/details/90240610 基于d3.v3...
推荐开源项目：Dagre-D3 - 强大的图绘制库
gitblog_00087的博客
04-25 608
推荐开源项目：Dagre-D3 - 强大的图绘制库 dagre-d3A D3-based renderer for Dagre项目地址:https://gitcode.com/gh_mirrors/dag/dagre-d3 项目简介 是一个基于 D3.js 的图表渲染库，特别适用于绘制有向无环图（Directed Acyclic Graph, DAG）和其他复杂的网络结构。该项目由 Chris ...
dagre-d3实现流程图并可拖拽
weixin_45954775的博客
06-30 3205
官方文档：d3：https://d3js.org/ 工作需求：实现一个可拖拽的工作流画布，类型elsa-core elsa-core：https://github.com/elsa-workflows/elsa-core 简单说明： -Dagre是一个能够在客户端轻松创建流程图的JavaScript类库，而dagre-d3可以理解为是Dagre的前端，它使用D3来进行渲染。 安装 npm install darge-d3 --save -dev npm install d3 --..
前端vue3项目dagre-d3基础配置项及流程图组件示例（包括安装依赖）
m0_59603076的博客
07-02 1639
dagre-d3安装使用，有基础配置项说明，流程图组件示例，代码直接可复用
dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。
qq_39213199的博客
11-29 2742
dagreD3.js: 一个基于D3的专注于有向图布局(流程图)javascript库。
vue利用dagre-d3/dagre实现动态流程图
weixin_45313093的博客
06-26 2527
实现动态流程图效果例如：实时监控项目请求接口数据，这期间数据是从网页到服务器或者到数据库等等的过程，想要一个可以直接清晰了解过程的流程图。
dagre-d3画树形拓扑图(包含分组)、流程图
qq_40588529的博客
05-31 1220
使用.translateExtent指定[[x0, y0], [x1, y1]]限制用户平移的范围。// 流程图从下向上显示，默认'TB'，可取值'TB'、'BT'、'LR'、'RL'// ranker: "network-simplex",//连线算法。// ranksep: 100, // 层与层之间的间距。// new dagreD3.render()创建渲染器。// compound:true为分组必须配置！// nodesep: 70, // 节点之间间距。// ②创建 graph 对象。
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 元素添加了鼠标悬停和鼠标移出事件，以改变节点的填充颜色。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值