如下代码,combo内的节点聚合后,line没有连接到combo上面。请问怎么设置,combo内的节点聚合后,line连接到combo上方
- 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);
};
```

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