antvis / antvis/G6

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

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

Description

### Describe the bug / 问题描述

一:顺序问题
![image](https://github.com/user-attachments/assets/d33fdd18-6159-4233-93c2-f9bdda086384)
id为我希望和0一个层级的点在0的上方时,layer不符合预期,
当在下方时layer符合预期
![image](https://github.com/user-attachments/assets/42110655-722b-469f-95bd-967ffb569286)
二:存在平行边时指定layer
![image](https://github.com/user-attachments/assets/0167d85b-e372-4f69-8eb3-4c352163d179)

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.