基于X6的依赖关系图

需求

话不多说,直接上效果图!

简单来说,就是需要画出中心实体依赖的以及被依赖的关系图,并且能够切换中心实体且展示其依赖。

实现

第一步需要从x6官网找到贴合依赖的例子,最终选中的是Dagre布局,贴合依赖下游的场景,如下图:

解析官网实现:

ts 复制代码
const data: Model.FromJSONData = {
  nodes: [],//节点
  edges: [],//边
}
const edges = [ //左边👈:被依赖ID,右边👉:依赖的ID
  ['1', '2'],
  ['2', '3'],
  ['2', '4'],
  ['4', '5'],
  ['4', '6'],
  ['4', '7'],
  ['4', '8'],
  ['5', '9'],
  ['6', '10'],
  ['7', '11'],
  ['8', '12'],
]

for (let i = 1; i <= 12; i++) {
  data.nodes!.push({ //节点配置
    id: `${i}`,
    shape: 'circle',
    width: 32,
    height: 32,
    label: i,
    attrs: {
      body: {
        fill: '#5F95FF',
        stroke: 'transparent',
      },
      label: {
        fill: '#ffffff',
      },
    },
  })
}

edges.forEach((edge: [string, string]) => {
  data.edges!.push({ //边的关系配置
    source: edge[0], //连接的头
    target: edge[1],//连接尾
    attrs: {
      line: {
        stroke: '#A2B1C3',
        strokeWidth: 2,
      },
    },
  })
})

const graph = new Graph({
  container: document.getElementById('container')!,
})

const dagreLayout = new DagreLayout({
  type: 'dagre',
  rankdir: 'LR',
  align: 'UR',
  ranksep: 35,
  nodesep: 15,
})
const model = dagreLayout.layout(data)

graph.fromJSON(model)

主要是data的节点nodes配置和对应的边edges配置的整合,看懂了官网的实现,就只要思考以下三个问题:

1、实体节点之间的关系如何表示

2、如何自定义节点

3、如何自定义箭头以及连接路由

只要解决以上三个问题,那么慢慢就能实现啦。接下来就逐一分析吧~

实体节点之间的关系如何表示

我们认真看官网的示例代码,就能看出实现节点的关系其实是在设置边的关系,就是只需要设置好Edge的source和target,所以我们只需要把Edge整理成两部分,然后遍历设置就好啦:

中心实体依赖的: [中心实体,中心实体依赖的实体]、

依赖中心实体的:[依赖中心实体的实体,中心实体]

获取数据的接口数据格式如下:

arduino 复制代码
export const MOCK_DATA = {
  //中心实体
  bizEntity: {
  
  },
  //中心实体依赖的
  relatedBizEntities: [
  
   
  ],
  
   //依赖中心实体的
  beRelatedBizEntities: [
    
  ]
};

如何自定义节点

接下来就是节点的问题。官网上简单配置得到的节点显然不是需求所需要的样子。我们需要自定义节点,这样节点想写成什么样就写成什么样。 于是再找找节点的官网例子:找到啦找到啦使用antv/x6-react-shape库可以自定义node节点组件。这样问题就简单啦。

如何自定义连接线以及连接路由

我们看官网的例子的箭头不符合需求,所以就需要配置我们自己的箭头。从官网的例子可以看到,我们在定义边关系的时候,就有在设置边的样式配置,比如,stroke,strokeWidth等。所以我们就需要再从官网去寻找 自定义箭头,也就是设置sourceMarker和targetMarker的d属性,详情可见:自定义箭头path。再设置router就可以使连线更丝滑。

代码实现

详细代码前往: codepen

踩坑:

1、需要初始化画布之后再请求数据,请求数据之后再创建创建DagreLayout布局。

2、中心实体切换的时候需要重新初始化画布,将上一层的画布清空。(此代码未实现中心实体的切换)

总结

平常不怎么接触图形的实现,一开始会无从下手,多看看官网例子+官网API,大胆尝试,慢慢就能解决啦~

相关推荐
张晓~183399481211 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
爱喝水的小周1 小时前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen02111 小时前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅1 小时前
介绍electron
前端·javascript·electron
周胡杰1 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
31535669131 小时前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑1 小时前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue771 小时前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃1 小时前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人1 小时前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架