需求

vue2 + antvX6完成流程图，但只有节点与线，没有节点的坐标，需要根据节点的顺序显示流程图。
需求：

1.根据数据动态生成对应的节点与线；
2.节点不能重叠；
3.节点与线可拖拽；
4.因为线存在重叠可能，所有鼠标移入时线必须高亮显示（红色），鼠标移出复原；
5.要求有对齐线；
6.线不能与节点重叠（先不能穿过节点）。

效果

图片

动图

参数

{"line_data": [ // 线数据{"name": "条件1-1", // 线名称"source_state_id": 6, // 源节点"destination_state_id": 5, // 目标节点"attribute_type_id": 1 // 成功或失败状态},{"name": "条件2-1","source_state_id": 9,"destination_state_id": 6,"attribute_type_id": 1},{"name": "条件2-2","source_state_id": 5,"destination_state_id": 6,"attribute_type_id": 2},{"name": "条件3-1","source_state_id": 10,"destination_state_id": 9,"attribute_type_id": 1},{"name": "条件3-2","source_state_id": 5,"destination_state_id": 9,"attribute_type_id": 2},{"name": "条件4-1","source_state_id": 11,"destination_state_id": 10,"attribute_type_id": 1},{"name": "条件4-2","source_state_id": 5,"destination_state_id": 10,"attribute_type_id": 2},{"name": "条件5-1","source_state_id": 12,"destination_state_id": 11,"attribute_type_id": 1},{"name": "条件5-2","source_state_id": 5,"destination_state_id": 11,"attribute_type_id": 2},{"name": "条件6-1","source_state_id": 13,"destination_state_id": 12,"attribute_type_id": 1},{"name": "条件6-2","source_state_id": 5,"destination_state_id": 12,"attribute_type_id": 2},{"name": "条件7-1","source_state_id": 18,"destination_state_id": 13,"attribute_type_id": 1},{"name": "条件7-2","source_state_id": 5,"destination_state_id": 13,"attribute_type_id": 2},{"name": "条件8-1","source_state_id": 19