一、效果图

二、为什么选用JointJs？

• 节点是动态绘制的
• JointJs绘制流向线条时不会遮挡住下方的节点元素，方便绑定事件做拓展
• JointJs提供丰富的API，虽然比较底层但是拓展灵活
• 连线不仅可以通过坐标点连接，还可直接根据节点连接

三、什么是JointJs？

JointJS: Visualize and interact with diagrams and graphs.

创建静态图表或完全交互式图表工具，例如工作流编辑器、流程管理工具、IVR 系统、API 集成器、演示应用程序等等。

• demo网址：https://resources.jointjs.com/demos#jointjs
• API文档：https://resources.jointjs.com/docs/jointjs/v3.5/joint.html

四、绘制流图方式

1. 绘制带箭头的连线

箭头link由joint.shapes.standard.Link实现

// 创建一个线条元素
let link = new joint.shapes.standard.Link(linkInfo);
// 设置线条属性-颜色
link.attr('line/stroke', '#FF620C');
// 设置线条属性-粗细
link.attr('line/strokeWidth', 1.5);
// 设置线条属性-箭头样式
link.attr({line: {targetMarker: {type: 'path','stroke-width': 1,fill: '#FF620C',d: 'M 8 -4 0 0 8 4 Z'}}
});
// 将线条添加至画布
link.addTo(this.graph);

2. 绘制流动点

圆点的播放动画由joint.dia.Link与linkView实现

// 创建Link元素(linkInfo为自定义)
let paperLink = new joint.dia.Link(linkInfo);
// 隐藏Link线条
paperLink.attr({'.connection': { stroke: 'none' }
});
// 添加Link到画布
paperLink.addTo(this.graph);
// 定义流动点样式
let vCircle = V('circle', {r: 5,fill: color
});
// 找到Link对应的LinkView
let paperLinkView = paperLink.findView(this.paper);
// 将点与LinkView绑定
paperLinkView.sendToken(vCircle, 4000);

3. 绘制流动动画

通过interval来循环播放动画

// 定时器循环播放
this.dataInterval = setInterval(() => {paperLinkView.sendToken(vCircle, 4000);
}, 5000);

4. 自定义连线信息

其中linkInfo为自定义，可以使用起点元素id与终点元素id，也可使用起点元素坐标与终点元素坐标，以官方文档link的使用为准

• 使用节点连接

let linkInfo={source: node1,target: node2
}

• 使用坐标连接

let linkInfo={source:{x:0,y:0},target: {x: 100,y: 100}
}