先附上 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…
目前就只理解到这些, 等当前开发中有新的了解, 再来增加