antvis / antvis/G6

如下代码,combo内的节点聚合后,line没有连接到combo上面。请问怎么设置,combo内的节点聚合后,line连接到combo上方

Open
#6,096 4 comments 0 reactions 0 assignees View on GitHub
element v4
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

```
import G6 from '@antv/g6';
const data = {
nodes: [
{
id: '0',
label: '0',
},
{
id: '1',
label: '1',
},
{
id: '2',
label: '2',
},
{
id: '3',
label: '3',
},
{
id: '4',
label: '4',
comboId: 'A',
},
{
id: '5',
label: '5',
comboId: 'B',
},
{
id: '6',
label: '6',
comboId: 'A',
},
{
id: '7',
label: '7',
comboId: 'C',
},
{
id: '8',
label: '8',
comboId: 'C',
},
{
id: '9',
label: '9',
comboId: 'A',
},
{
id: '10',
label: '10',
comboId: 'B',
},
{
id: '11',
label: '11',
comboId: 'B',
},
],
edges: [
{
source: '0',
target: '1',
type: 'cubic-horizontal',
},
{
source: '0',
target: '2',
type: 'cubic-horizontal',
},
{
source: '1',
target: '4',
type: 'cubic-horizontal',
},
{
source: '0',
target: '3',
type: 'cubic-horizontal',
},
{
source: '3',
target: '4',
type: 'cubic-horizontal',
},
{
source: '2',
target: '5',
type: 'cubic-horizontal',
},
{
source: '1',
target: '6',
type: 'cubic-horizontal',
},
{
source: '1',
target: '7',
type: 'cubic-horizontal',
},
{
source: '3',
type: 'cubic-horizontal',
target: '8',
},
{
source: '3',
type: 'cubic-horizontal',
target: '9',
},
{
source: '5',
type: 'cubic-horizontal',
target: '10',
},
{
source: '5',
target: '11',
type: 'cubic-horizontal',
},
],
combos: [
{
id: 'A',
label: 'combo A',
style: {
fill: '#C4E3B2',
stroke: '#C4E3B2',
},
},
{
id: 'B',
label: 'combo B',
style: {
stroke: '#99C0ED',
fill: '#99C0ED',
},
},
{
id: 'C',
label: 'combo C',
style: {
stroke: '#eee',
fill: '#eee',
},
},
],
};

data.nodes.forEach((node) => {
switch (node.ComboId) {
case 'A':
node.style = {
fill: '#C4E3B2',
stroke: '#aaa',
};
break;
case 'B':
node.style = {
fill: '#99C0ED',
stroke: '#aaa',
};
break;
case 'C':
node.style = {
fill: '#eee',
stroke: '#aaa',
};
break;
default:
node.style = {
fill: '#FDE1CE',
stroke: '#aaa',
};
break;
}
});

let sortByCombo = false;
const descriptionDiv = document.createElement('button');
descriptionDiv.innerHTML = 'Enable sortByCombo';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);

descriptionDiv.addEventListener('click', (e) => {
sortByCombo = !sortByCombo;
descriptionDiv.innerHTML = sortByCombo ? 'Disable sortByCombo' : 'Enable sortByCombo';
graph.updateLayout({
sortByCombo,
});
});
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new G6.Graph({
container: 'container',
width,
height: height - 50,
fitView: true,
fitViewPadding: 30,
animate: true,
groupByTypes: false,
modes: {
default: [
'drag-combo',
'drag-node',
'drag-canvas',
{
type: 'collapse-expand-combo',
relayout: false,
},
],
},
defaultEdge: {
type: 'cubic-horizontal',
// 配置起始和目标锚点
sourceAnchor: 1, // 源节点的底部中心锚点
targetAnchor: 0, // 目标节点的顶部中心锚点
style: {
cursor: 'pointer',
},
},
layout: {
type: 'dagre',
sortByCombo: false,
ranksep: 10,
nodesep: 10,
},
defaultNode: {
size: [60, 30],
type: 'rect',
anchorPoints: [[0.5, 0], [0.5, 1]]
},
defaultEdge: {
type: 'cubic-horizontal',
// 配置起始和目标锚点
sourceAnchor: 1, // 源节点的底部中心锚点
targetAnchor: 0, // 目标节点的顶部中心锚点
style: {
cursor: 'pointer',
lineWidth: 1, // 若不设置,会导致combo折叠后,线条边堆叠在一起
stroke: '#C9CDD4',
curveOffset: 20,
},
},
defaultCombo: {
type: 'rect',
style: {
fillOpacity: 0.1,
},
},
});
graph.data(data);
graph.render();

console.log('comboTrees', graph.get('comboTrees'))

if (typeof window !== 'undefined')
window.onresize = () => {
if (!graph || graph.get('destroyed')) return;
if (!container || !container.scrollWidth || !container.scrollHeight) return;
graph.changeSize(container.scrollWidth, container.scrollHeight - 30);
};
```
![image](https://github.com/user-attachments/assets/61b4813f-ed4b-4e40-9823-22294d211a67)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the inline G6 example, focusing on the combo collapse behavior, dagre layout, defaultEdge anchors, and defaultNode anchorPoints. Reproduce the reported result where edges do not connect to the combo, then determine the configuration or behavior needed for collapsed edges to connect at the combo's top; done means the displayed connections match that expectation.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.