通过数据⾃动⽣成流程图（前端⽅向）
最近博客更新的⽐较慢，因为⼯作⽐较忙所以只能抽出周末的时间写点东西了.好像除了过节还没有这么久没更新的记录，哈.
最近有⼀个需求是根据数据⾃动在前端页⾯画出⼀个流程导向图，简单说就是把数据以A节点指向B节点,B节点指向C节点这种形式给你，然后让页⾯⾃⼰在⼀定区域内渲染出⼀个流程图.当然节点上可能还有其他信息，这个暂时不考虑，就是这样⼀个需求，最后是借助⼀个⼯具完成的.先说⼀下处理过程:
可以说这个问题⼀开始我⾛了弯路，想的不是那么清楚,⼀开始想的是⾃⼰画.低端的就是⽤html+css各种布局，画出⽅块和线条,⾄于箭头什么的再想办法.后来⼀想这样太低端了，应该专业⼀点，就打算⽤canvas或者svg.因为之前⽤过echarts前端的图标库，知道它底层有个依赖库zrender就是专门弄canvas的，所以好⼀阵看，感觉还靠谱，能画出来.
这样虽然能画出来，不过接下来我们就要考虑更多的问题,⾸先什么时候折⾏，然后遇到分⽀的种种情况怎么处理.最后我查资料竟然开始涉及⼀些图论的东西了，深刻感觉到东西好像变复杂了，我的⽬的不是研究理论,⽽是为了⼀个实现.
这时候转变⼀下思路，有没有什么⼯具能专门做这样的⼯作，类似于jQuery⼤家都⽤它操作DOM,Req
uireJS都⽤它来实现模块化加载.那应该也有类似的东西，集成了数学上的图论,⾃动布局等.这就不得不说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 .
上⼀个简单的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" });svg canvas
// 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很轻松的就加上
去了.感觉还是个很给⼒的库,⽽且国内这⽅⾯资料感觉不多，分享给⼤家.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。