[Bug]: compact-box 布局,独立子节点(没有孙子节点)放在复杂节点(>3个孙子节点)前后和复杂节点的距离不一致
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
```html
const { Graph, treeToGraphData } = G6;
function isLeafNode(d) {
return !d.children || d.children.length === 0;
}
const data = {
id: "Modeling Methods",
children: [
{
id: "Consensus",
children: [
{
id: "Models diversity",
children: [
{
id: "Different initializations"
},
{
id: "Different parameter choices"
},
{
id: "Different architectures"
},
{
id: "Different modeling methods"
},
{
id: "Different training sets"
},
{
id: "Different feature sets"
}
]
},
{
id: "Methods",
children: [
{
id: "Classifier selection"
},
{
id: "Classifier fusion"
}
]
},
{
id: "Common",
children: [
{
id: "Bagging"
},
{
id: "Boosting"
},
{
id: "AdaBoost"
}
]
}
]
},
{
id: "Regression",
children: [
{
id: "Multiple linear regression"
},
{
id: "Partial least squares"
},
{
id: "Multi-layer feedforward neural network"
},
{
id: "General regression neural network"
},
{
id: "Support vector regression"
}
]
},
{
id: "Classification",
}
]
}
const graph = new Graph({
container: 'container',
autoFit: 'view',
data: treeToGraphData(data),
behaviors: ['drag-canvas', 'zoom-canvas', 'collapse-expand'],
node: {
style: {
labelText: (d) => d.id,
labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
labelBackground: true,
ports: [{ placement: 'right' }, { placement: 'left' }],
},
animation: {
enter: false,
},
},
edge: {
type: 'cubic-horizontal',
animation: {
enter: false,
},
},
layout: {
type: 'compact-box',
direction: 'LR',
getHeight: function getHeight() {
return 32;
},
getWidth: function getWidth() {
return 32;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
},
},
});
graph.render();
```
### Reproduction link / 复现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
```html
const { Graph, treeToGraphData } = G6;
function isLeafNode(d) {
return !d.children || d.children.length === 0;
}
const data = {
id: "Modeling Methods",
children: [
{
id: "Consensus",
children: [
{
id: "Models diversity",
children: [
{
id: "Different initializations"
},
{
id: "Different parameter choices"
},
{
id: "Different architectures"
},
{
id: "Different modeling methods"
},
{
id: "Different training sets"
},
{
id: "Different feature sets"
}
]
},
{
id: "Methods",
children: [
{
id: "Classifier selection"
},
{
id: "Classifier fusion"
}
]
},
{
id: "Common",
children: [
{
id: "Bagging"
},
{
id: "Boosting"
},
{
id: "AdaBoost"
}
]
}
]
},
{
id: "Regression",
children: [
{
id: "Multiple linear regression"
},
{
id: "Partial least squares"
},
{
id: "Multi-layer feedforward neural network"
},
{
id: "General regression neural network"
},
{
id: "Support vector regression"
}
]
},
{
id: "Classification",
}
]
}
const graph = new Graph({
container: 'container',
autoFit: 'view',
data: treeToGraphData(data),
behaviors: ['drag-canvas', 'zoom-canvas', 'collapse-expand'],
node: {
style: {
labelText: (d) => d.id,
labelPlacement: (d) => (isLeafNode(d) ? 'right' : 'left'),
labelBackground: true,
ports: [{ placement: 'right' }, { placement: 'left' }],
},
animation: {
enter: false,
},
},
edge: {
type: 'cubic-horizontal',
animation: {
enter: false,
},
},
layout: {
type: 'compact-box',
direction: 'LR',
getHeight: function getHeight() {
return 32;
},
getWidth: function getWidth() {
return 32;
},
getVGap: function getVGap() {
return 10;
},
getHGap: function getHGap() {
return 100;
},
},
});
graph.render();
```
### Version / 版本
🆕 5.x
### 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 compact-box layout implementation used by the Graph configuration in the reproduction, then run the supplied HTML example with G6 5.x and inspect the vertical distances around the Consensus, Regression, and Classification nodes. Confirm the behavior for leaf nodes before and after complex nodes, and consider the issue done when those distances are consistent without regressing other compact-box tree layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100