已解决
vue使用antv-x6 绘制流程图DAG图
来自网友在路上 194894提问 提问时间:2023-11-01 17:04:01阅读次数: 94
最佳答案 问答题库948位专家为你答疑解惑
注册节点两种方法:
import { Graph, Node, Path, Cell, Addon } from "@antv/x6";
import { register } from "@antv/x6-vue-shape";
1.x 的写法:
registerCustomNode() {// demoGraph.registerNode("custom-polygon",{inherit: "polygon",width: 66,height: 36,markup: [{tagName: "polygon",selector: "body",},{tagName: "text",selector: "label",},],attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",},text: {fontSize: 12,fill: "#262626",},},ports: {...ports,// items: [ // 这里是限制连接点多少个的地方// {// group: 'top',// },// {// group: 'bottom',// },// ],},},true);Graph.registerNode("custom-circle",{inherit: "circle",width: 45,height: 45,markup: [{tagName: "circle",selector: "body",},{tagName: "text",selector: "label",},],attrs: {body: {strokeWidth: 1,stroke: "#5F95FF",fill: "#EFF4FF",},text: {fontSize: 12,fill: "#262626",},},ports: { ...ports },},true);// 自定义节点Graph.registerNode("dag-node",{inherit: "rect",width: 180,height: 36,markup: [{tagName: "rect", // 标签名称selector: "body", // 选择器},{tagName: "image",selector: "image1",},{tagName: "text",selector: "label",},{tagName: "image",selector: "image2",},],attrs: {body: {strokeWidth: 1,stroke: "rgba(255, 255, 255, 0.3)",fill: "#1D2035",},image1: {"xlink:href": imgCot.logo,width: 16,height: 16,x: 12,y: 12,},label: {fontSize: 12,fill: "rgba(255, 255, 255, 0.9)",},image2: {"xlink:href": imgCot.logo,width: 16,height: 16,x: 12,y: 12,refX: "80%",},},ports: {groups: {top: {position: "top",attrs: {circle: {r: 4,magnet: true,stroke: "#C2C8D5",strokeWidth: 1,fill: "#fff",},},},bottom: {position: "bottom",attrs: {circle: {r: 4,magnet: true,stroke: "#C2C8D5",strokeWidth: 1,fill: "#fff",},},},},},},true);},
2.x 的写法: 注册vue组件节点
registerCustomVueNode() {register({shape: "dag-node",width: 185,height: 40,component: DataBase,ports: {groups: {top: {position: "top",attrs: {circle: {r: 4,magnet: true,stroke: "#C2C8D5",strokeWidth: 1,fill: "#fff",},},},bottom: {position: "bottom",attrs: {circle: {r: 4,magnet: true,stroke: "#C2C8D5",strokeWidth: 1,fill: "#fff",},},},},},});},
查看全文
99%的人还看了
相似问题
- 〖大前端 - 基础入门三大核心之JS篇㊲〗- DOM改变元素节点的css样式、HTML属性
- Java 算法篇-链表的经典算法:判断回文链表、判断环链表与寻找环入口节点(“龟兔赛跑“算法实现)
- 代码随想录二刷 | 链表 | 删除链表的倒数第N个节点
- 节点导纳矩阵
- bhosts 显示节点 “unreach“ 状态
- 电子电器架构 —— 车载网关边缘节点总线转换
- 〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点
- 第四天||24. 两两交换链表中的节点 ● 19.删除链表的倒数第N个节点 ● 面试题 02.07. 链表相交 ● 142.环形链表II
- CS224W5.1——消息传递和节点分类
- Vue报错解决Error in v-on handler: “Error: 无效的节点选择器:#div1“
猜你感兴趣
版权申明
本文"vue使用antv-x6 绘制流程图DAG图":http://eshow365.cn/6-29465-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: 蓝桥杯每日一题2023.11.1
- 下一篇: 解决VSCode使用SSH远程连接时无法指定用户名的问题