项目中想搞定一个流程图,开始使用了阿里的G6,但是G6目前不支持手势,这样就很郁闷了,因为公司的领导都是使用iPad看的,你不支持手势是不行的,后来又想到了百度的echarts,试了试,感觉还不错,手机端也是没问题的,但是用起来不是很好用,每个节点的位置还要自己去设置计算有点麻烦,所以想找个在支持pc和wap并且使用方便的,结果找到了dagre-d3.js,完全满足我的需求啊,就是文档不全,还大多数都是英文。搞完之后觉得有必要记录一下,哈哈哈。

首先避免不了的就是下载,既然是基于d3的肯定是要连同d3一下下载的。

npm install d3
npm install dagre-d3

下载完毕就开始使用了,如果下载的时候报错了可以尝试cnpm下载。

下载完之后就要说说数据结构了,如下图:

从图中我们可以知道需要两个数据,第一个是节点信息,包含节点名称、ID、状态等等只要是节点信息都可以放在里边;第二个是节点之间的关系,可以简单的理解成管道,比如从节点1--->节点2。

所以我们的数据结构是这样的:

 1 list: {
2   nodeInfos: [
3     {
4       id: "node1",
5       label: "节点1",
6     },
7     {
8       id: "node2",
9       label: "节点2",
10     },
11     {
12       id: "node3",
13       label: "节点3",
14     },
15     {
16       id: "node4",
17       label: "节点4",
18     },
19   ],
20   edges: [
21     {
22       source: "node1",
23       target: "node2",
24     },
25     {
26       source: "node2",
27       target: "node3",
28     },
29     {
30       source: "node2",
31       target: "node4",
32     },
33   ]
34 }

其中nodeInfos是节点信息,edges是节点之间的关系,当然节点的信息可以包含很多信息,比如节点的形状、大小、背景颜色,圆角等等,同时也可以在设置节点信息的时候添加或者根据你自己节点的状态判断显示什么样的样式。接下来就是绘制流程图了,首先呢需要先获取实例对象并且做一些简单的配置。我们直接使用默认的就可以。

 var g = new dagreD3.graphlib.Graph().setGraph({}).setDefaultEdgeLabel(function() { return {}; });

接下来就是添加节点

this.list.nodeInfos.forEach((item, index) => {
g.setNode(item.id, item);
});

然后在加上节点关系

this.list.edges.forEach(item => {
g.setEdge(item.source, item.target, {});
});

最后就是绘制图形了

var svg = d3.select("svg"),
i nner = svg.select("g");
//缩放
var zoom = d3.zoom().on("zoom", function () {
inner.attr("transform", d3.event.transform);
});
svg.call(zoom);
var render = new dagreD3.render();
render(inner, g);

这样简单的流程图就完成了,如果想加点击事件呢,可以这样

let code;
inner.selectAll("g.node").on("click", e => {
//点击事件
code = this.list.nodeInfos.filter(item => {
return item.id == e;
});
console.log(code);
});

最最简单的一个流程图组件就完成了,当然了dagre-d3.js不仅仅是这点功能,还有许多可以设置的,大家多练一练就可以喽。

demo地址:https://gitee.com/webliusong/dagre-d3

在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件的更多相关文章

  1. 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  2. vue中,基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

  3. SolidEdge 装配体中如何快速的搞定一个面上所有螺丝 如何在装配体上进行阵列

    1 点击"规则排列" 选择要排列的螺丝   2 选择被规则排列的架子   3 选择所有的圆孔(鼠标滑到任意圆孔位置,左键单击即可选中所有圆孔)   4 选择参考的基准孔(已经上了螺 ...

  4. 深度分析:Java中如何如理异常,一篇帮你搞定!

    异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: 除以 0 System.out.println(10 / 0); // 执行结果 Exception ...

  5. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  6. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  7. vue中8种组件通信方式, 值得收藏!

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...

  8. Vue中组件之间的通信方式

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...

  9. vue中的数据监听以及数据交互

    现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...

随机推荐

  1. [考试反思]1006csp-s模拟测试62:隔断

    本来说好的好一场烂一场. 那样的日子结束了,连着烂了两场...幸亏T3傻逼了救我一命不算太惨... T1树上的特殊性质会做但是没有继续想下去就死在错贪心上了还没有过那个点... T2迭代至稳定被我错误 ...

  2. Mybaits 源码解析 (十一)----- 设计模式精妙使用:静态代理和动态代理结合使用:@MapperScan将Mapper接口生成代理注入到Spring

    上一篇文章我们讲了SqlSessionFactoryBean,通过这个FactoryBean创建SqlSessionFactory并注册进Spring容器,这篇文章我们就讲剩下的部分,通过Mapper ...

  3. 「BZOJ1576」[Usaco2009 Jan] 安全路经Travel------------------------P2934 [USACO09JAN]安全出行Safe Travel

    原题地址 题目描述 Gremlins have infested the farm. These nasty, ugly fairy-like creatures thwart the cows as ...

  4. Spring容器自动调用方法的两种方式

    先看一个Spring中Bean的实例化过程: 1.配置文件中指定Bean的init-method参数 <bean class="com.jts.service.UserService& ...

  5. python入门之五种字典创建方法

    a = dict(one = 1, tow = 2, three = 3)b = {'one' :1,'tow' :2 , 'three' :3}c = dict (zip(['one', 'tow' ...

  6. 因为 GitHub Actions 我发现了 Jake Wharton 的一个仓库

    本文微信公众号「AndroidTraveler」首发. 背景 昨天(2019-11-14)上去 GitHub 上面一看,结果来了个下面的提示: 点进去一看: 看来是自动化构建相关的. 那就试一下,选了 ...

  7. jquery手机端横屏判断方法

    jquery手机端横屏判断方法<pre>$(function() { var bodywidth = $('body').width(); var bodyheight = $('body ...

  8. [javascript] Javascript的笔记

    1.2019年10月20日12:28:16,学习HOW2J的Javascript, 2.一般见到的缩写js,就是javascript的意思: 3.javascript代码必须放在script标签中,s ...

  9. 【Elasticsearch 7 探索之路】(三)倒排索引

    上一篇,我们介绍了 ES 文档的基本 CURE 和批量操作.我们都知道倒排索引是搜索引擎非常重要的一种数据结构,什么是倒排索引,倒排索引的原理是什么. 1 索引过程 在讲解倒排索引前,我们先了解索引创 ...

  10. nyoj 217-a letter and a number (char)

    217-a letter and a number 内存限制:64MB 时间限制:3000ms 特判: No 通过数:4 提交数:5 难度:1 题目描述: we define f(A) = 1, f( ...