[Bug]: 树形布局,节点收起后,收起的节点所占用的空间没有被收回
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
事例代码:
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