最近项目需要实现可视化绘制DAG即有向无环图,经过几个方案的调研,最终选择了jsPlumb.
jsPlumb
本身分Tookit
付费版及Community
社区版,因核心功能社区版都已具备,且开源社区本身的活跃度更为方便未来的开发维护等,所以选择社区版。
学习渠道
学习一个技术,官方文档,官方社区,谷歌搜索,是你最需要依重的.
这里啰嗦,贴下地址
除了这些官方资料,看一些博文也能有不小帮助,正如我这里写的,愿能帮到你些。
使用
我的实际项目前端框架是Angular,所以这里代码是是在此背景下的写法,但应不怎么影响大家去借鉴,毕竟思维,理念都差不都,毕竟都是JS。
先了解jsPlumb绘图的几个概念
端点
端点,是指,我们图上可以有几个连出去或者连进来的可视化点锚点
锚点指的是端点可以最终落下的位置,也就意味着,一个端点,可以指定多个锚点位置,根据实际的图形位置,灵活落在某个锚点上。
连线
我们通过连接建立多个Window即节点之间的关联,比如我们用贝塞尔曲线,还是流程图那种的折线,这些就需要设定连接器覆盖物
解决绘制与连接之上的UI问题,比如标签,或者箭头等
强调:其实,很多时候,很容易误解锚点和端点的概念,我也走了点弯路
上例子
已实现功能
- 动态添加节点
- 动态删除节点
- 动态连边
- 动态删边
- 节点拖拽监听
- 节点及边,右键菜单
第三方组件jquery.contextMenu实现
Show me the code
1 | import {Component, ElementRef, OnInit, Renderer2, ViewChild} from '@angular/core'; |
总结
jsPlumb
相对其它绘图方案已经成熟,如果不想自己重新造轮子,使用这个可以满足所需,当然实际使用上,个人认为官方Doc还是不算完善,有时看的莫名其妙,有时还有错误。
比如删边,其实函数名称叫deleteConnection
,如下图: