我是靠谱客的博主 坚强小熊猫,这篇文章主要介绍antv x6踩坑记录一,现在分享给大家,希望可以做个参考。

x6的配置啥的,这里就不赘诉了,可以去官网看antv x6官网地址,写得很详细,这里主要讲一下使用x6的过程中遇到的坑的问题,有的找到了解决办法,有的暂时没找到解决办法,如果哪位大佬有解决办法,愿意分享的话,十分感激!

  1. MiniMap和Selection不能共用:这个问题我暂时没有找到解决办法。在使用小地图的时候,再在画布中框选了子节点并添加了群组节点,在群组没有收缩的时候是能够正常展示,但是群组收缩后再次打开就会导致整个页面崩溃。这里的建议是,值进行群组节点的增加,但是不建议给群组节点增加收缩功能
  2. 增加群组节点并添加子节点的时候,群组节点内部是空白的:这里要说一下x6的渲染优先级,在fromJSON这个方法中,能识别的一个数组,数组中包含两个对象,edges和nodes,节点的渲染优先级是按照nodes数组中的节点来渲染的,就是说,如果群组节点在子节点后渲染,那么群组节点就是空的,所以这里需要做一下nodes数组排序,将群组节点放到子节点之前优先渲染,这样群组节点就不会出现空白了
  3. 在项目中,遇到一个问题,就是在实例化x6的node节点的时候,出现了Class constructor Node cannot be invoked without 'new'这样的错误,意思是说new的父类和子类不在同一个地方,去网上搜索了很多答案,提示都是webpack配置错误,但是在我们这个项目中,去webpack导入了x6的依赖后,然后有出现7了一系列的其他问题,加之这个项目的webpack配置很久了(17年配置的,很多配置不能轻易改动),此外,在x6的官网去更改typescript的写法为JavaScript的写法,也会出现这个问题,最后选择的是一个绕开的方式去实现的
    官网实现的demo地址,功能就是群组节点继承node,然后拓展收缩功能
    本地绕开实现方式:参考x6的dag源码改造
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import { minBy, maxBy, sortBy, fill } from 'lodash-es'; import { Graph, Node } from '@antv/x6' export const GROUP_HORIZONTAL__PADDING = 24 // 分组横向 padding export const GROUP_VERTICAL__PADDING = 40 // 分组纵向 padding export const NODE_WIDTH = 180 export const NODE_HEIGHT = 32 // 根据群组节点的收缩状态及子节点,计算出节点群组的尺寸和位置 export function calcNodeScale(groupData, children,) { const { isCollapsed } = groupData const minX = minBy(children, 'position.x').position.x const minY = minBy(children, 'position.y').position.y const maxX = maxBy(children, 'position.x').position.x const maxY = maxBy(children, 'position.y').position.y const minW = minBy(children, 'size.width').size.width const minH = maxBy(children, 'size.height').size.height const maxW = maxBy(children, 'size.width').size.width const maxH = maxBy(children, 'size.height').size.height const defaultX = minX - GROUP_HORIZONTAL__PADDING const defaultY = minY - GROUP_VERTICAL__PADDING const defaultWidth = maxX - minX + 2 * GROUP_HORIZONTAL__PADDING + NODE_WIDTH if (isCollapsed) { return { x: defaultX + defaultWidth / 2 - NODE_WIDTH / 2, y: defaultY, width: NODE_WIDTH, height: NODE_HEIGHT, } } return { x: defaultX, y: defaultY, width: maxW + GROUP_VERTICAL__PADDING + (maxX - minX), height: maxY - minY + 2 * GROUP_VERTICAL__PADDING + NODE_HEIGHT, } } // 格式化单个群组,新增群组时复用 export function formatGroupInfoToNodeMeta(groupData, nodeDatas, edges) { const { id, isCollapsed, fill, stroke, name } = groupData; const includedNodes = nodeDatas.filter( (nodeMeta) => nodeMeta.groupId.toString() === id.toString() ) const { x, y, width, height } = calcNodeScale(groupData, includedNodes) return { type: 'group', ...groupData, id: id.toString(), x, y, width, height, zIndex: 1, data: { ...groupData, type: 'group', includedNodes, id: id.toString() }, ports: { items: portItems, }, } } // 群组配置 const config = getGroupConfig(name); return { type: 'group', ...groupData, id: id.toString(), x, y, width, height, ...config, zIndex: 1, data: { ...groupData, type: 'group', includedNodes, id: id.toString() }, } } // 获取群组的配置 export function getGroupConfig(name) { return { markup: [ { tagName: 'rect', selector: 'body', }, { tagName: 'text', selector: 'label', }, { tagName: 'g', selector: 'buttonGroup', children: [ { tagName: 'rect', selector: 'button', attrs: { 'pointer-events': 'visiblePainted', }, }, { tagName: 'path', selector: 'buttonSign', attrs: { fill: 'none', 'pointer-events': 'none', d: 'M 2 5 8 5', }, }, ], }, ], attrs: { body: { refWidth: '100%', refHeight: '100%', strokeWidth: 1, fill: "#fff", stroke: '#1890ff', }, buttonGroup: { refX: 8, refY: 8, }, button: { height: 14, width: 16, rx: 2, ry: 2, fill: '#f5f5f5', stroke: '#ccc', cursor: 'pointer', event: 'node:collapse', }, buttonSign: { refX: 3, refY: 2, stroke: '#808080', }, label: { fontSzie: 12, fill: '#000', refX: 60, refY: 16, text: name }, }, } }

最后

以上就是坚强小熊猫最近收集整理的关于antv x6踩坑记录一的全部内容,更多相关antv内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(79)

评论列表共有 0 条评论

立即
投稿
返回
顶部