antv g6 自定义流水步骤图

实现效果

思路

自定义节点、自定义边
每行节点个数：第一行六个，其他都为五个
去除第一个节点，剩余节点用5为基数，通过Math.floor取行数，设置Y
用索引 % 5 取余，设置X
单独处理索引为5的倍数的节点
单独处理索引除5余1的节点
新手入门不是太熟练，就自定义了四条边，向右的两条，向左的两条，

nodes

index	x	y
0	baseX	baseY
1	firstW	baseY
2	firstW + diffWidth	baseY
3	firstW + 2 * diffWidth	baseY
4	firstW + 3 * diffWidth	baseY
5	firstW + 4 * diffWidth	baseY
6	firstW + 4 * diffWidth	baseY + diffHeight
7	firstW + 3 * diffWidth	baseY + diffHeight
8	firstW + 2 * diffWidth	baseY + diffHeight
9	firstW + diffWidth	baseY + diffHeight
10	firstW	baseY + diffHeight
11	firstW	baseY + 2 * diffHeight

edges

source	target	type	sourceAnchor	targetAnchor	path
1	2	textEdgeR	2	4	M 0,0 L 10,5 L 10,-5 Z
2	3	textEdgeR	2	4	M 0,0 L 10,5 L 10,-5 Z
3	4	textEdgeR	2	4	M 0,0 L 10,5 L 10,-5 Z
4	5	textEdgeR	2	4	M 0,0 L 10,5 L 10,-5 Z
5	6	textArcEdgeR	2	3	M -3, 0 L 9, 0 L 4, -10 Z
6	7	textEdgeL	2	3	M 0,0 L 10,5 L 10,-5 Z
7	8	textEdgeL	2	3	M 0,0 L 10,5 L 10,-5 Z
8	9	textEdgeL	2	3	M 0,0 L 10,5 L 10,-5 Z
9	10	textEdgeL	2	3	M 10,-1 L 0,4 L 0,-6 Z
10	11	textArcEdgeL	2	2	M 0,0 L 10,5 L 10,-5 Z

    const baseX = 50
    const baseY = 70
    const diffHeight = 170
    const diffWidth =