antvis/G6


The issue has been closed
[v5] combo布局异常 #5988
liseri posted onGitHub
Describe the bug / 问题描述
版本:v5
示例:https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo
问题:改一个连接连后,布局发生了错乱,如下图:
代码:
import { Graph } from '@antv/g6';
const g6DataOfDagre = {
"nodes": [
{
"id": "0",
"data": {}
},
{
"id": "1",
"data": {}
},
{
"id": "2",
"data": {}
},
{
"id": "3",
"data": {}
},
{
"id": "4",
"combo": "A",
"data": {}
},
{
"id": "5",
"combo": "B",
"data": {}
},
{
"id": "6",
"combo": "A",
"data": {}
},
{
"id": "7",
"combo": "C",
"data": {}
},
{
"id": "8",
"combo": "C",
"data": {}
},
{
"id": "9",
"combo": "A",
"data": {}
},
{
"id": "10",
"combo": "B",
"data": {}
},
{
"id": "11",
"combo": "B",
"data": {}
}
],
"edges": [
{
"id": "edge-102",
"source": "0",
"target": "1",
"data": {}
},
{
"id": "edge-161",
"source": "0",
"target": "2",
"data": {}
},
{
"id": "edge-237",
"source": "1",
"target": "4",
"data": {}
},
{
"id": "edge-253",
"source": "0",
"target": "3",
"data": {}
},
{
"id": "edge-133",
"source": "3",
"target": "4",
"data": {}
},
{
"id": "edge-355",
"source": "1",
"target": "6",
"data": {}
},
{
"id": "edge-823",
"source": "1",
"target": "7",
"data": {}
},
{
"id": "edge-665",
"source": "3",
"target": "8",
"data": {}
},
{
"id": "edge-884",
"source": "3",
"target": "9",
"data": {}
},
{
"id": "edge-536",
"source": "5",
"target": "10",
"data": {}
},
{
"id": "edge-401",
"source": "5",
"target": "11",
"data": {}
},
{
"id": "edge-320",
"source": "2",
"target": "B",
"data": {}
}
],
"combos": [
{
"id": "A",
"data": {}
},
{
"id": "B",
"data": {}
},
{
"id": "C",
"data": {}
}
]
}
fetch('https://assets.antv.antgroup.com/g6/dagre-combo.json')
.then((res) => res.json())
.then((data) => {
const graph = new Graph({
container: 'container',
autoFit: 'view',
// data: data,
data: g6DataOfDagre,
node: {
type: 'rect',
style: {
size: [60, 30],
radius: 8,
labelText: (d) => d.id,
labelPlacement: 'center',
// ports: [{ placement: 'top' }, { placement: 'bottom' }],
},
palette: {
field: (d) => d.combo,
},
},
edge: {
type: 'cubic-vertical',
style: {
endArrow: true,
},
},
combo: {
type: 'rect',
style: {
radius: 8,
labelText: (d) => d.id,
lineDash: 0,
collapsedLineDash: [5, 5],
},
},
layout: {
type: 'antv-dagre',
ranksep: 50,
nodesep: 5,
sortByCombo: true,
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
});
graph.render();
});
Reproduction link / 重现链接
https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo
Steps to Reproduce the Bug or Issue / 重现步骤
- 打开示例:https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo
- 将如下代码粘贴进去,代码中就是改了一个连接边,从2连5改成了2连B
G6 Version / G6 版本
🆕 5.x
Operating System / 操作系统
Windows
Browser / 浏览器
Chrome
Additional context / 补充说明
No response