本文已参加「新人创作礼」活动，一起开启掘金创作之路

一、效果图

二、为什么选用JointJs？

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

三、什么是JointJs？

JointJS: Visualize and interact with diagrams and graphs.

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

• demo网址：resources.jointjs.com/demos#joint…
• API文档：resources.jointjs.com/docs/jointj…

四、绘制流图方式

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
    }
}