IssueHunt求助：关于图形分组相关的需求实现求助 #5580
TabCrazy posted onGitHub
问题描述
图上有combo、node、edge
实例化图的时候没有设置 groupByTypes: false，默认情况下有 -combo -node -edge -delegate 四个分组
z-index 处理是 -combo < -edge < node
业务所需 当前有node有两种类型、渲染第1类需要渲染在边下面、第2类需要渲染在边的上面
思考着解决方案
1、在 -combo -node -edge -delegate 四个分组，增加一个分组 newGroup
2、将 第一类的node归到 newGroup 分组中
3、再控制5个分组的z-index 将 newGroup 放置-edge下面
这样的方式解决业务诉求
重现链接
无
重现步骤
无
预期行为
目前遇到的问题，求助
1、在什么时机能添加一个新的分组与 -combo -node -edge -delegate 四个分组平级，如何添加分组
2、在什么时机能能将第1类node，划分到新添加的分组
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
1、在graph.render()之后调用 const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' // 其他配置省略 }) 创建新分组 2、创建新分组后const nodeGroup = graph.getGroup().find(i => i.cfg.id === '-node')获取到节点分组，将节点分组里你需要的元素(nodeGroup.cfg.children)移动到新分组，最后调用newGroup.toBack()置底新分组
1、在graph.render()之后调用 const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' // 其他配置省略 }) 创建新分组 2、创建新分组后const nodeGroup = graph.getGroup().find(i => i.cfg.id === '-node')获取到节点分组，将节点分组里你需要的元素(nodeGroup.cfg.children)移动到新分组，最后调用newGroup.toBack()置底新分组
谢谢！我去试试
1、在graph.render()之后调用 const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' // 其他配置省略 }) 创建新分组 2、创建新分组后const nodeGroup = graph.getGroup().find(i => i.cfg.id === '-node')获取到节点分组，将节点分组里你需要的元素(nodeGroup.cfg.children)移动到新分组，最后调用newGroup.toBack()置底新分组
// ...
graph.render()
const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup'})
const nodeGroup = graph.get('nodeGroup')
const cloneNodeGroup = cloneDeep(nodeGroup)
cloneNodeGroup.cfg.children.forEach((groupItem) => {
if(groupItem.cfg.name === 'key') {
newGroup.cfg.children.push(groupItem)
nodeGroup.removeChild(groupItem)
}
})
graph.get('comboGroup').set('zIndex', 0)
newGroup.set('zIndex', 1)
graph.get('edgeGroup').set('zIndex', 2)
nodeGroup.set('zIndex', 3)
graph.get('group').sort()
// ...做了如下的验证，感觉好像通过 push 直接移到新创建的分组, 再操作排序。发现好像并没有搞定
1、在graph.render()之后调用 const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' // 其他配置省略 }) 创建新分组 2、创建新分组后const nodeGroup = graph.getGroup().find(i => i.cfg.id === '-node')获取到节点分组，将节点分组里你需要的元素(nodeGroup.cfg.children)移动到新分组，最后调用newGroup.toBack()置底新分组
// ... graph.render() const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup'}) const nodeGroup = graph.get('nodeGroup') const cloneNodeGroup = cloneDeep(nodeGroup) cloneNodeGroup.cfg.children.forEach((groupItem) => { if(groupItem.cfg.name === 'key') { newGroup.cfg.children.push(groupItem) nodeGroup.removeChild(groupItem) } }) graph.get('comboGroup').set('zIndex', 0) newGroup.set('zIndex', 1) graph.get('edgeGroup').set('zIndex', 2) nodeGroup.set('zIndex', 3) graph.get('group').sort() // ...做了如下的验证，感觉好像通过
push直接移到新创建的分组, 再操作排序。发现好像并没有搞定
你检查一下循环里push和remove操作的结果是否符合预期，我改了一下代码，是可以实现功能的。
// ...
graph.render()
const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' })
const nodeGroup = graph.get('nodeGroup')
for (let i = nodeGroup.cfg.children.length - 1; i >= 0; i--) {
if (nodeGroup.cfg.children[i].cfg.item.getModel().type === 'site') {
newGroup.cfg.children.push(nodeGroup.cfg.children[i])
nodeGroup.cfg.children.splice(i, 1)
}
}
graph.get('comboGroup').set('zIndex', 0)
newGroup.set('zIndex', 1)
graph.get('edgeGroup').set('zIndex', 2)
nodeGroup.set('zIndex', 3)
graph.get('group').sort()
// ...nodeGroup.cfg.children.splice(i, 1)
三克油 我再检查检查
1、在graph.render()之后调用 const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' // 其他配置省略 }) 创建新分组 2、创建新分组后const nodeGroup = graph.getGroup().find(i => i.cfg.id === '-node')获取到节点分组，将节点分组里你需要的元素(nodeGroup.cfg.children)移动到新分组，最后调用newGroup.toBack()置底新分组
// ... graph.render() const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup'}) const nodeGroup = graph.get('nodeGroup') const cloneNodeGroup = cloneDeep(nodeGroup) cloneNodeGroup.cfg.children.forEach((groupItem) => { if(groupItem.cfg.name === 'key') { newGroup.cfg.children.push(groupItem) nodeGroup.removeChild(groupItem) } }) graph.get('comboGroup').set('zIndex', 0) newGroup.set('zIndex', 1) graph.get('edgeGroup').set('zIndex', 2) nodeGroup.set('zIndex', 3) graph.get('group').sort() // ...做了如下的验证，感觉好像通过
push直接移到新创建的分组, 再操作排序。发现好像并没有搞定你检查一下循环里push和remove操作的结果是否符合预期，我改了一下代码，是可以实现功能的。
// ... graph.render() const newGroup = graph.getGroup().addGroup({ id: 'newGroup', name: 'newGroup' }) const nodeGroup = graph.get('nodeGroup') for (let i = nodeGroup.cfg.children.length - 1; i >= 0; i--) { if (nodeGroup.cfg.children[i].cfg.item.getModel().type === 'site') { newGroup.cfg.children.push(nodeGroup.cfg.children[i]) nodeGroup.cfg.children.splice(i, 1) } } graph.get('comboGroup').set('zIndex', 0) newGroup.set('zIndex', 1) graph.get('edgeGroup').set('zIndex', 2) nodeGroup.set('zIndex', 3) graph.get('group').sort() // ...
for (let i = nodeGroup.cfg.children.length - 1; i >= 0; i--) {
if (nodeGroup.cfg.children[i].cfg.item.getModel().type === 'site') {
newGroup.cfg.children.push(nodeGroup.cfg.children[i])
nodeGroup.cfg.children.splice(i, 1)
}
}用nodeGroup.cfg.children.splice 移除元素搞定，已经达到预期。非常感谢！