antvis/G6

how to unbind the relationship between the node and combo #6539

stevenzhou1989 posted onGitHub

Describe the bug / 问题描述

import { Graph } from '@antv/g6';

const data = { nodes: [ { id: 'node1', combo: 'combo1', style: { x: 150, y: 150 } }, { id: 'node2', combo: 'combo1', style: { x: 250, y: 150 } } ], edges: [], combos: [{ id: 'combo1' }], };

const graph = new Graph({ container: 'container', data, layout: {type: 'random'}, node: { style: { labelText: (d) => d.id, }, }, combo: {

style: {
  padding: 10,
},

}, behaviors: ['drag-element', 'collapse-expand'], });

graph.render() graph.once('afterstagelayout', () => { graph.translateElementTo({ 'node1': [100, 200] }).then(() => { graph.updateNodeData([{id:'node1',combo:undefined,style: { x: 100, y: 200 }}]); graph.updateComboData([{ id: "combo1"}]); console.error(graph.getNodeData(['node1'])); }) });

比如我一个分组里面有两个节点,现在我在编辑拓扑的时候想移除其中一个节点node1,尽管通过代码updateNodeData了,但是当再次拖拽元素的时候,发现节点1还是被分组给吸附上了

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response


我也遇到同样的问题,线上demo补充如下: https://codesandbox.io/p/sandbox/pedantic-rain-779n5y

另外,这是我目前找到的能用的方法,只是用起来比较麻烦

  • 解绑某个节点
    graph.context.model.setParent(nodeId, undefined, 'combo', true)
    graph.draw();
  • 清空某个combo的层次结构
    // 但这个方法是protected的,不太建议用
    graph.context.model.removeNodeLikeHierarchy(comboId)
    

// 清空后按需重新绑定需要的层次结构 graph.updateNodeData([{id: 'node1', combo: 'combo1'}]))

graph.draw()

```

希望能提供一个接口出来,在updateNodeData后,开发者自行去更新combo的层级结构即可(能做到主动更新就更好了,只是看了源码实现起来会比较繁琐)

posted by TZZack 5 months ago

Fund this Issue

$0.00
Funded

Pull requests