本文介绍了一个前端需求，即根据数据在页面上自动绘制流程导向图。最初尝试使用html+css、canvas或svg实现，但发现过于复杂。最终，作者在Github上找到dagre-d3库，它基于D3.js，能自动布局并绘制流程图。只需将数据转换为合适格式，即可轻松绘制，并且支持节点和线条样式的定制，还能够添加交互事件。
最近博客更新的比较慢,因为工作比较忙所以只能抽出周末的时间写点东西了.好像除了过节还没有这么久没更新的记录,哈.
最近有一个需求是根据数据自动在前端页面画出一个流程导向图,简单说就是把数据以A节点指向B节点,B节点指向C节点这种形式给你,然后让页面自己在一定区域内渲染出一个流程图.当然节点上可能还有其他信息,这个暂时不考虑,就是这样一个需求,最后是借助一个工具完成的.先说一下处理过程:
可以说这个问题一开始我走了弯路,想的不是那么清楚,一开始想的是自己画.低端的就是用html+css各种布局,画出方块和线条,至于箭头什么的再想办法.后来一想这样太低端了,应该专业一点,就打算用canvas或者svg.因为之前用过echarts前端的图标库,知道它底层有个依赖库zrender就是专门弄canvas的,所以好一阵看,感觉还靠谱,能画出来.
这样虽然能画出来,不过接下来我们就要考虑更多的问题,首先什么时候折行,然后遇到分支的种种情况怎么处理.最后我查资料竟然开始涉及一些图论的东西了,深刻感觉到东西好像变复杂了,我的目
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
