在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件
项目中想搞定一个流程图,开始使用了阿里的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搞定一个流程图组件的更多相关文章
- 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。
为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...
- vue中,基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
- SolidEdge 装配体中如何快速的搞定一个面上所有螺丝 如何在装配体上进行阵列
1 点击"规则排列" 选择要排列的螺丝 2 选择被规则排列的架子 3 选择所有的圆孔(鼠标滑到任意圆孔位置,左键单击即可选中所有圆孔) 4 选择参考的基准孔(已经上了螺 ...
- 深度分析:Java中如何如理异常,一篇帮你搞定!
异常的背景 初识异常 我们曾经的代码中已经接触了一些 "异常" 了. 例如: 除以 0 System.out.println(10 / 0); // 执行结果 Exception ...
- vue可视化图表 基于Echarts封装好的v-charts简介
**vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- vue中8种组件通信方式, 值得收藏!
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就 ...
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- vue中的数据监听以及数据交互
现在我们来看一下vue中的数据监听事件$watch, js代码: new Vue({ el:"#div", data:{ arr:[,,] } }).$watch("ar ...
随机推荐
- deepin扬声器/耳机没有声音解决方案
昨天准备在deepin系统下看视频学习一下Linux,结果登入deepin系统后发现不论是外放还是插耳机竟然都没有声音,这种情况以前也出现过,只不过没有在意,后来就自己又好了,今天这次可真是让我决定要 ...
- Data Deduplication Workflow Part 1
Data deduplication provides a new approach to store data and eliminate duplicate data in chunk level ...
- PMD-Java代码静态分析工具使用
如今,使用代码分析工具来代替人工进行代码审查,已经是大势所趋了.用于Java代码检测的工具中,不乏许许多多的佼佼者,其中PMD就是其中一款.PMD既可以独立运行,也可以以命令行的形式运行,还可以作为插 ...
- docker已运行容器添加或修改端口映射
# 不推荐方法:将原来的容器提交成镜像,然后利用新的建立的镜像重新建立一个带有端口映射的容器# 推荐方法:## 查看id 就是 容器的 hash_of_the_container 数值 docker ...
- Vue+element UI实现表格数据导出Excel组件
介绍 这是一个可以将页面中的表格数据导出为Excel文件的功能组件,该组件一般与表格一起使用,将表格数据传给组件,然后通过点击组件按钮可将表格中的数据导出成Excel文件. 使用方法 由于封装该组件内 ...
- 腾讯开源进入爆发期,Plato助推十亿级节点图计算进入分钟级时代
腾讯开源再次迎来重磅项目,14日,腾讯正式宣布开源高性能图计算框架Plato,这是在短短一周之内,开源的第五个重大项目. 相对于目前全球范围内其它的图计算框架,Plato可满足十亿级节点的超大规模图计 ...
- JVM 中你不得不知的一些参数
有的同学虽然写了一段时间 Java 了,但是对于 JVM 却不太关注.有的同学说,参数都是团队规定好的,部署的时候也不用我动手,关注它有什么用,而且,JVM 这东西,听上去就感觉很神秘很高深的样子,还 ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 3.1 资源命名
之前讲了RESTful API的统一资源接口这个约束,里面提到了资源是通过URI来进行识别的,每个资源都有自己的URI.URI里还涉及到资源的名称,而针对资源的名称却没有一个标准来进行规范,但是业界还 ...
- Groovy单元测试框架spock数据驱动Demo
spock是一款全能型的单元测试框架. 上次文章分享了spock框架的基础功能的使用,在此基础上,我根据自己写的Groovy的封装方法.数据驱动以及一些Groovy的高级语法做了一些尝试.发现还是有一 ...
- T-SQL, Part III: Check table's existance
There are several approaches to achieve so. Just list out all approaches I have tried: Approach 1: s ...