antv/x6_2.0学习使用（五、路由）

bigHead-

已于 2024-01-08 14:22:08 修改

阅读量2.4k

点赞数 20

分类专栏： antv/x6 文章标签：学习 antv X6 vue.js 前端 typescript javascript reactjs

于 2024-01-08 14:21:21 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_47872719/article/details/135456098

版权

本文详细介绍了X6库中提供的五种路由算法：默认(normal)、正交(orth)、受限正交(oneSide)、智能正交(manhattan)、地铁(metro)和实体关系ER路线。此外，还包括自定义路由功能，如随机路由示例。这些路由算法考虑了自动避开路径上的障碍和方向控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

路由名称	说明
normal	默认路由，原样返回路径点
orth	正交路由，由水平或垂直的正交线段组成
oneSide	受限正交路由，由受限的三段水平或垂直的正交线段组成
manhattan	智能正交路由，由水平或垂直的正交线段组成，并自动避开路径上的其他节点（障碍）
metro	智能地铁线路由，由水平或垂直的正交线段和斜角线段组成，类似地铁轨道图，并自动避开路径上的其他节点（障碍）
er	实体关系路由，由 Z 字形的斜角线段组成

normal

系统的默认路由，该路由原样返回传入的 vertices 路径点。

orth

正交路由，该路由在路径上添加额外的一些点，使边的每一条线段都水平或垂直正交。

支持的参数如下表：

参数名	参数类型	是否必选	默认值	参数说明
padding	SideOptions	否	20	设置锚点距离转角的最小距离

SideOptions 定义如下：

export type SideOptions =
  | number
  | {
      vertical?: number
      horizontal?: number
      left?: number
      top?: number
      right?: number
      bottom?: number
    }

例如:

graph.addEdge({
  source,
  target,
  vertices: [
    { x: 100, y: 200 },
    { x: 300, y: 120 },
  ],

最低0.47元/天解锁文章