Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

antv-dagre error "Edge not found for id:", the edge and id exist on the graph, and it is no problem to replace it with dagre #6477

Open
xiaoxiaofu1 opened this issue Nov 5, 2024 · 2 comments

Comments

@xiaoxiaofu1
Copy link

Describe the bug / 问题描述

const layouts = [
{
type: 'antv-dagre',
// type: 'dagre',
label: '层次布局',
rankdir: 'LR',
nodeSep: 30,
ranksep: 700,
icon: ,
}
];
const handleLayout = () => {
const selectedNodesIds = graph.getElementDataByState('node', 'selected').map((item) => item.id);
const nodeFilter = (item) => selectedNodesIds.includes(item.id);
const begin = graph.getViewportCenter();
const config = mode === 'global' ? layout : { ...layout, nodeFilter, begin };
graph.setLayout(config);
graph.layout()
};
如图是部分代码,如果把antv-dagre改成dagre就没有这个错误

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

@github-actions github-actions bot changed the title antv-dagre 报错 Edge not found for id:,实际这个边和id在图上存在,换成dagre就没问题 antv-dagre error "Edge not found for id:", the edge and id exist on the graph, and it is no problem to replace it with dagre Nov 5, 2024
@yvonneyx
Copy link
Contributor

yvonneyx commented Nov 5, 2024

请提供完整复现 demo~

@xiaoxiaofu1
Copy link
Author

请提供完整复现 demo~

我发现是当存在平行边,然后指定layer就会出这个问题,可以用下面的例子
import { Graph } from '@antv/g6';

const data = {
nodes: [
{ id: '0', layer: 0 },
{ id: '01', layer: 0 },
{ id: '1', layer: 1 },
{ id: '2', layer: 1 },
{ id: '-1', layer: -1 },
{ id: '-2', layer: -1 }
],
edges: [
{ source: '0', target: '1' },
{ source: '1', target: '0' },
{ source: '0', target: '2' },
{ source: '-1', target: '0' },
{ source: '-2', target: '0' },
],
};

const graph = new Graph({
container: 'container',
autoFit: 'view',
animation: false,
data,
layout: {
type: 'antv-dagre',
rankdir: 'LR',
nodeSize: [60, 30],
nodesep: 60,
ranksep: 40,
controlPoints: true,
},
node: {
type: 'rect',
style: {
size: [60, 30],
radius: 8,
labelText: (d) => d.id,
labelBackground: true,
}
},
edge: {
type: 'polyline',
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
});

graph.render();

window.addPanel((gui) => {
const config = { layout: 'default' };
const layouts = {
default: { type: 'antv-dagre', nodesep: 100, ranksep: 70, controlPoints: true },
LR: { type: 'antv-dagre', rankdir: 'LR', align: 'DL', nodesep: 50, ranksep: 70, controlPoints: true },
'LR&UL': { type: 'antv-dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesep: 50, ranksep: 70 },
};

gui.add(config, 'layout', Object.keys(layouts)).onChange(async (layout) => {
graph.setLayout(layouts[layout]);
await graph.layout();
graph.fitCenter();
});
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants