antvis/G6

[v5] combo布局异常 #5988

liseri posted onGitHub

Describe the bug / 问题描述

版本:v5 示例:https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo 问题:改一个连接连后,布局发生了错乱,如下图: image 代码:

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();
  });

https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo

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

  1. 打开示例:https://g6-next.antv.antgroup.com/zh/examples/layout/dagre#antv-dagre-combo
  2. 将如下代码粘贴进去,代码中就是改了一个连接边,从2连5改成了2连B

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response


dagre 布局不适用于节点连接到 combo 的情况

posted by Aarebecca 10 months ago

@Aarebecca 请问下,这里是否只有箭头方向不正确而已呢?不会连接错误对吗?

posted by liaodalin19903 4 months ago

Fund this Issue

$0.00
Funded

Pull requests