文档章节

通过数据自动生成流程图(前端方向)

顽Shi
 顽Shi
发布于 2014/04/13 11:25
字数 1032
阅读 14804
收藏 66

    最近博客更新的比较慢,因为工作比较忙所以只能抽出周末的时间写点东西了.好像除了过节还没有这么久没更新的记录,哈.

    最近有一个需求是根据数据自动在前端页面画出一个流程导向图,简单说就是把数据以A节点指向B节点,B节点指向C节点这种形式给你,然后让页面自己在一定区域内渲染出一个流程图.当然节点上可能还有其他信息,这个暂时不考虑,就是这样一个需求,最后是借助一个工具完成的.先说一下处理过程:

    可以说这个问题一开始我走了弯路,想的不是那么清楚,一开始想的是自己画.低端的就是用html+css各种布局,画出方块和线条,至于箭头什么的再想办法.后来一想这样太低端了,应该专业一点,就打算用canvas或者svg.因为之前用过echarts前端的图标库,知道它底层有个依赖库zrender就是专门弄canvas的,所以好一阵看,感觉还靠谱,能画出来.

    

    这样虽然能画出来,不过接下来我们就要考虑更多的问题,首先什么时候折行,然后遇到分支的种种情况怎么处理.最后我查资料竟然开始涉及一些图论的东西了,深刻感觉到东西好像变复杂了,我的目的不是研究理论,而是为了一个实现.

    这时候转变一下思路,有没有什么工具能专门做这样的工作,类似于jQuery大家都用它操作DOM,RequireJS都用它来实现模块化加载.那应该也有类似的东西,集成了数学上的图论,自动布局等.这就不得不说Github火的一塌糊涂是有原因的,我搜了很多中文网站以及百度都没什么结果(不知道是不是关键字有问题),总之没搜到能用的东西.但是在Github上找到了一个开源项目:dagre-d3.

    看名字就能猜到它是基于D3库的,D3是一个专门用于前端图形绘制的库,dagre-d3就是实现自动布局并且绘制流程图的这么一个东西.

Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3.

    上一个简单的Demo:

// Create a new directed graph
var g = new dagreD3.Digraph();

// Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of
// our nodes.
g.addNode("kspacey",    { label: "Kevin Spacey" });
g.addNode("swilliams",  { label: "Saul Williams" });
g.addNode("bpitt",      { label: "Brad Pitt" });
g.addNode("hford",      { label: "Harrison Ford" });
g.addNode("lwilson",    { label: "Luke Wilson" });
g.addNode("kbacon",     { label: "Kevin Bacon" });

// Add edges to the graph. The first argument is the edge id. Here we use null
// to indicate that an arbitrary edge id can be assigned automatically. The
// second argument is the source of the edge. The third argument is the target
// of the edge. The last argument is the edge metadata.
g.addEdge(null, "kspacey",   "swilliams", { label: "K-PAX" });
g.addEdge(null, "swilliams", "kbacon",    { label: "These Vagabond Shoes" });
g.addEdge(null, "bpitt",     "kbacon",    { label: "Sleepers" });
g.addEdge(null, "hford",     "lwilson",   { label: "Anchorman 2" });
g.addEdge(null, "lwilson",   "kbacon",    { label: "Telling Lies in America" });

    它渲染出来是这样的:

    这样我们只要把数据处理成对应格式,就可以轻松的自动绘制会流程图.比较给力的是它对数据的支持良好,有多个格式可以选择,而且虽然接口不多,但是对于节点以及线条的操作都有,可以很轻松的改变节点以及线条的样式,这个大家可以看官方的demo.

    另外如果要附加交互事件,可以通过jquery实现,也很容易,我使用bootstrap的tooltip很轻松的就加上去了.感觉还是个很给力的库,而且国内这方面资料感觉不多,分享给大家.

    最后差点忘了Github地址:    https://github.com/cpettitt/dagre-d3

© 著作权归作者所有

顽Shi
粉丝 275
博文 81
码字总数 92387
作品 0
普陀
程序员
私信 提问
加载中

评论(20)

奋斗obj
您好:
请教一下,我现在写一个流程图,类似于tooltip那种效果,写死的数据有用,用 获取的 json 不行,控制台报错,“label” 未定义,请问一下这个问题如何解决呢?
不负如来不负卿
不负如来不负卿
请问这个能不能再框框里面添加一张图片?
爱阳光的小菇凉
爱阳光的小菇凉
请问节点之间的距离应该怎么设置啊?就是节点怎么布局的?
L-Z-L
L-Z-L
节点是怎么布局的能指导下吗
幼稚园杀手
幼稚园杀手
可以自定义node里面的文本的样式么?我是说可以自定义一个div在里面?
顽Shi
顽Shi 博主

引用来自“冰糯鸢”的评论

那个canvas画图的代码有吗,想学习一下
dagre-d3
冰糯鸢
那个canvas画图的代码有吗,想学习一下
顽Shi
顽Shi 博主

引用来自“loiogu”的评论

不支持IE游览器
对低版本的应该没有支持,高版本都有,因为低版本IE支持的东西太少
l
loiogu
不支持IE游览器
王二铁
王二铁
很赞,感谢分享
在线协作与文档管理系统 - kooteam

kooteam是一款轻量级的在线团队协作工具,提供各类文档工具、在线思维导图、在线流程图、项目管理、任务分发,知识库管理等工具。 kooteam完全打通钉钉功能,同步企业通讯录,实现钉钉扫码自...

小小胖
2018/11/21
0
0
工作满一年需要换工作(web方向)简历该怎么整?

在国企干了一年,说句实在话,基本上没有学到多少东西,由于在项目中偏前端开发,正好对这个也兴趣,就准备投web前端方向,自学一些东西,但由于不是专业搞前端的,因此简历很水,惨不忍睹....

yws52417
2016/07/11
1K
6
[原创]JWFDv0.96工作流系统--流程XML文档结构说明

作者: comsci 发表于 2010-10-08 09:27 原文链接 阅读: 7 评论: 0 本文简要介绍了JWFDv0.96工作流系统的流程图XML模型结构,其中带有少量的专业语言,浅显易懂,适合初学工作流系统的设计和开...

comsci
2010/10/14
0
0
react+dva+antd接口调用方式

一丶 安装 通过 npm 安装 dva-cli 并确保版本是0.8.1或以上。 二丶创建新应用 安装完dva-cli之后,就可以在命令行里访问到dva命令(不能访问?)。现在,你可以通过dva new创建新应用。 之后...

sidney_c
2017/10/23
0
0
麻烦您看一下我的这个开源Java代码怎么样?

@红薯 你好,想跟你请教个问题: 我实现了一个调度引擎: 基本模型: 基于事件或Quartz定时生成一个job,每个job由若干个task组成,task之间存在串行或并行的依赖关系。 task的具体实现引擎不关...

xuda7342399
01/08
0
1

没有更多内容

加载失败,请刷新页面

加载更多

聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
13分钟前
0
0
17.windows上安装kafka并简单应用

1.单机版 1.1 安装jdk 略 1.2 安装zookeeper https://my.oschina.net/springMVCAndspring/blog/3045210 1.3 安装window上安装kafka 1.3.1 下载 http://kafka.apache.org/downloads 1.3.2 解压......

20190513
16分钟前
1
0
缓存雪崩

缓存雪崩原因:大批次的缓存数据,同一时刻过期 解决方案: 1、尽可能避免所有缓存在同一时刻过期,即:合理调整过期策略 2、对条件加锁 伪代码: public ProductselectProduct(String id){ ...

少年已不再年少
今天
8
0
所以说这才是Redis进化史吗?看Redis是如何变成最强缓存的

写在前面:笔者翻阅了很多资料,只能找到Redis2.2及以后的主要版本的发布日志。所以,让我们从2.2开始一步一步深入了解Redis。 2.2 redis-cli命令非常大的改进: Tab补全,支持help(例如help ...

Java干货分享
今天
13
0
manjaro抽风,/usr/lib/modules目录丢失

现象 2019年6月16日这周,突然发现manjaro抽风: 先是启动时无法加载一些内核模块,导致启动失败 然后用启动盘重新pacman -S linux,第一次启动是好的,再启动就有问题了 原因 翻来覆去搞不定...

chuqq
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部