先附上x6的地址https://x6.antv.vision/zh/doc...
在附上一个基于x6的一个我的项目地址 https://github.com/rxdrag/rx-...(应用的技术是mobx和Material-UI, 不得不说,代码写的真好, 以类为类型,文件间的援用嵌套真的厉害. ts用的炉火纯青, 代码真的有种多一行少一行都不行的感觉)
公司也不晓得怎么找的, 就要弄个这个货色,一开始的时候基本不晓得要干什么,就放了一个原型图说要做这个, 其余的一句话没说. 扔给我这两个网址让我搞
心里纵然万般不想,也不得不做啊.
照着人家rx-models-client这个我的项目,一开始想着把人家的代码移植过去,再用redux重写一遍,后果就是我高估了本人,始终在用redux的思维看mobx, 后果就是一塌糊涂,基本不晓得怎么改代码.
顶着解体的情绪看了两天代码,放弃了原先的想法,借鉴rx-models-client的写法,而后本人写.
果然柳暗花明又一村, 在人家的代码中发现了一个属性叫component,能够自定义组件.(也不能怪我, 官网的文档写了之后一半的感觉,有还多api和属性都找不到),而后也在官网发现了自定义组件的例子https://x6.antv.vision/zh/exa...
铛铛铛铛铛, 原型图就还原进去了
记录一下antv x6的用法
首先, 引入 import { Graph, Shape, Addon } from '@antv/x6';
而后, 实例化 const graph = new Graph({
container: document.getElementById('graph-container')!, grid: true,})
new Graph的参数在官网中有文档的,请自行查看,不在赘述
实例化后的graph有哪些属性和办法, 官网中就没有特地介绍了,只是穿插在其余的属性介绍当中
Graph.registerNode(),注册节点的办法,请参照
https://x6.antv.vision/zh/doc...
请留神是大写的G,Graph, 而不是实例的graph
graph.createNode() 创立节点, 创立之后能力应用,具体参数参照文档的基类cell和节点node,
有一个文档中没呈现的属性component, 用来自定义组件
graph.addNode() 增加节点, 将节点增加到graph画布当中,应用办法参照自定义节点的例子
graph.removeNode() 移除节点, 参数是节点id
graph.on() 是监听事件的, 必定用的到,查看文档https://x6.antv.vision/zh/doc...
目前就只理解到这些, 等当前开发中有新的了解,再来增加