antvis / antvis/G6

[Bug]: compact-box 布局,独立子节点(没有孙子节点)放在复杂节点(>3个孙子节点)前后和复杂节点的距离不一致

Open
#7,633 1 comment 0 reactions 0 assignees View on GitHub
waiting for maintainer
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

Image

```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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.