antv-darge layer 1: The order of the point data will affect the layer, resulting in the failure to meet expectations. 2. When there is a bidirectional edge, an error will be reported when specifying a layer
- Dominant language
- TypeScript
- Stars
- 12.3k
- Forks
- 1.6k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug / 问题描述
一:顺序问题

id为我希望和0一个层级的点在0的上方时,layer不符合预期,
当在下方时layer符合预期

二:存在平行边时指定layer

### Reproduction link / 重现链接
_No response_
### Steps to Reproduce the Bug or Issue / 重现步骤
import { Graph } from '@antv/g6';
const data = {
nodes: [
{ id: '我希望和0一个层级', layer: 0 },
{ id: '0', layer: 0 },
// { id: '我希望和0一个层级', 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();
});
});
### G6 Version / G6 版本
🆕 5.x
### Operating System / 操作系统
macOS
### Browser / 浏览器
Chrome
### Additional context / 补充说明
_No response_
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the supplied G6 reproduction and the antv-dagre layout configuration, especially graph.layout() with layered nodes and bidirectional edges. Trace how node input order and explicit layer values are handled; done when layer placement is stable regardless of point order and specifying a layer with parallel or bidirectional edges no longer errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100