antv/x6_2.0学习使用（四、边）

一、添加边

节点和边都有共同的基类 Cell，除了从 Cell 继承属性外，还支持以下选项。

二、配置边

1. source/target
   边的源和目标节点(点)

graph.addEdge({source: rect1, // 源节点target: rect2, // 目标节点
})graph.addEdge({source: 'rect1', // 源节点 IDtarget: 'rect2', // 目标节点 ID
})graph.addEdge({source: { cell: rect1, port: 'out-port-1' }, // 源节点和连接桩 IDtarget: { cell: 'rect2', port: 'in-port-1' }, // 目标节点 ID 和连接桩 ID
})graph.addEdge({source: 'rect1', // 源节点 IDtarget: { x: 100, y: 120 }, // 目标点
})

2. vertices
   路径点。边从起始点开始，按顺序经过路径点，最后到达终止点。

const graph = new Graph({container: graphRef.value,width: 800,height: 600,background: {color: "#F2F7FA",},
});const source = graph.addNode({shape: "rect",x: 40,y: 40,width: 80,height: 40,label: "hello",
});const target = graph.addNode({shape: "rect",x: 300,y: 220,width: 80,height: 40,label: "world",
});graph.addEdge({source,target,attrs: {line: {stroke: "#8f8f8f",strokeWidth: 1,},},vertices: [{ x: 100, y: 200 },{ x: 300, y: 120 },],
});

以下是效果图

3. router
   路由 router 将对 vertices 进一步处理，并在必要时添加额外的点，然后返回处理后的点。例如，经过 orth 路由处理后，边的每一条链接线段都是水平或垂直的。

graph.addEdge({source: rect1,target: rect2,vertices: [{ x: 100, y: 200 },{ x: 300, y: 120 },],// 如果没有 args 参数，可以简写为 router: 'orth'router: {name: 'orth',args: {},},
})

• X6 默认提供了以下几种路由:

  • normal
  • orth
  • oneSide
  • manhattan
  • metro
  • er
  • 自定义路由

4. connector

连接器 connector 将路由 router 返回的点加工成渲染边所需要的 pathData。例如，rounded 连接器将连线之间的倒角处理为圆弧倒角

graph.addEdge({source: rect1,target: rect2,vertices: [{ x: 100, y: 200 },{ x: 300, y: 120 },],router: 'orth',// 如果没有 args 参数，可以简写写 connector: 'rounded'connector: {name: 'rounded',args: {},},
})

以下是效果图

• X6 默认提供了以下几种连接器:

  • normal
  • rounded
  • smooth
  • jumpover
  • 自定义连接器

5. 箭头

x6 定义了 sourceMarker 和 targetMarker 两个特殊属性来为边定制起始和终止箭头。

• X6 默认提供了以下几种内置箭头，使用时只需要指定箭头名和参数（可省略）即可。

  • block
  • classic
  • diamond
  • cross
  • async
  • path
  • circle
  • circlePlus
  • ellipse
  • 自定义箭头

const graph = new Graph({container: graphRef.value,width: 800,height: 600,background: {color: "#F2F7FA",},
});const markers = ["block","classic","diamond","circle","circlePlus","ellipse","cross","async",
];markers.forEach((marker, i) => {graph.addEdge({sourcePoint: [120, 20 + i * 40],targetPoint: [400, 20 + i * 40],label: marker,attrs: {line: {sourceMarker: marker,targetMarker: marker,stroke: "#8f8f8f",strokeWidth: 1,},},});
});

以下是效果图