antvis / antvis/G6

[Bug]: 树形布局,节点收起后,收起的节点所占用的空间没有被收回

Open
#7,601 4 comments 0 reactions 0 assignees View on GitHub
bug 🐛
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

Image

事例代码:
import { Graph, treeToGraphData } from '@antv/g6';

/**
* If the node is a leaf node
* @param {*} d - node data
* @returns {boolean} - whether the node is a leaf node
*/
function isLeafNode(d) {
return !d.children || d.children.length === 0;
}

fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
autoFit: 'view',
data: treeToGraphData(data),
behaviors: ['drag-canvas', 'zoom-canvas', 'drag-element', 'collapse-expand'],
node: {
style: (d) => {
const style = {
labelText: d.id,
labelPlacement: 'right',
labelOffsetX: 2,
labelBackground: true,
ports: [{ placement: 'top' }, { placement: 'bottom' }],
};
if (isLeafNode(d)) {
Object.assign(style, {
labelTransform: [
['rotate', 90],
['translate', 18],
],
labelBaseline: 'center',
labelTextAlign: 'left',
});
}
return style;
},
animation: {
enter: false,
},
},
edge: {
type: 'cubic-vertical',
animation: {
enter: false,
},
},
layout: {
type: 'compact-box',
direction: 'TB',
getHeight: function getHeight() {
return 16;
},
getWidth: function getWidth() {
return 16;
},
getVGap: function getVGap() {
return 80;
},
getHGap: function getHGap() {
return 20;
},
},
});

graph.render();
});

### Reproduction link / 复现链接

_No response_

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

_No response_

### Version / 版本

Please select / 请选择

### OS / 操作系统

- [ ] macOS
- [ ] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [ ] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the provided Graph configuration, especially the collapse-expand behavior and compact-box layout using treeToGraphData. Reproduce the issue by collapsing a node and inspect whether the layout recalculates; done means the space previously occupied by collapsed descendants is reclaimed.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.