Combo 中边会默认使用曲线， Combo 外的边默认会使用直线，两者表现不一致 #5103

同样的代码在官网 demo 中绘制出来表现不一致，节点2和节点3在一个水平线上，用直线相连，复合预期 <img width="1369" alt="image" src="https://github.com/antvis/G6/assets/37073056/ee7054f1-73c0-4019-81de-c1e59b69e1d5"> 示例地址：https://antv-g6.gitee.io/zh/examples/net/dagreFlow#dagreCombo 代码如下：

import G6 from '@antv/g6';

const init = () => {
  const data = {
  nodes: [
    {
        id: '0',
        label: '0',
      },
    {
      id: '1',
      label: '1',
      child: {
        nodes: [
          { id: '2', name: '2' },
          { id: '3', name: '3' },
        ]
      }
    },
    {
      id: '2',
      label: '2',
      comboId: 'A'
    },
    {
      id: '3',
      label: '3',
      comboId: 'A'
    }
  ],
  edges: [
    {
        source: '0',
        target: '1',
      },
    {
      source: '1',
      target: 'A',
    },
    {
      source: '2',
      target: '3',
    }
  ],
  combos: [
    {
      id: 'A',
      label: 'combo A',
    }
  ],
};

let sortByCombo = false;
const descriptionDiv = document.createElement('button');
descriptionDiv.innerHTML = 'Enable sortByCombo';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);

descriptionDiv.addEventListener('click', (e) => {
  sortByCombo = !sortByCombo;
  descriptionDiv.innerHTML = sortByCombo ? 'Disable sortByCombo' : 'Enable sortByCombo';
  graph.updateLayout({
    sortByCombo,
  });
});
const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;

const graph = new G6.Graph({
  container: 'container',
  width,
  height: height,
  fitCenter: true,
  // animate: true,
  groupByTypes: false,
  modes: {
    default: [
      'zoom-canvas',
      'drag-combo',
      // 'drag-node',
      'drag-canvas',
      {
        type: 'collapse-expand-combo',
        relayout: false,
      },
    ],
  },
  layout: {
    type: 'dagre',
    rankdir: 'LR',
    sortByCombo: true,
    ranksep: 40,
    nodesep: 40,
  },
  defaultNode: {
    size: [40, 30],
    type: 'rect',
    anchorPoints: [
      [0, 0.5],
      [0.5, 0],
      [1, 0.5],
      [0.5, 1]
    ]
  },
  defaultEdge: {
    type: 'cubic-horizontal',
    style: {
      stroke: '#666666',
      endArrow: {
        path: G6.Arrow.triangle(8, 10, 10), // 内置箭头，参数为箭头宽度、长度、偏移量 d（默认为 0）
        d: 15, // 偏移量
        fill: '#666666',
        stroke: '#666666',
      },
    },
  },
  defaultCombo: {
    type: 'rect',
    style: {
      lineDash: [5, 5],
      fill: '',
      stroke: '#666666',
    },
  },
});
graph.data(data);
graph.render();

console.log('comboTrees', graph.get('comboTrees'))

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight - 30);
  };
}

// init()

setTimeout(() => {
  init()
}, 100)

可以试试这种布局方法：https://codesandbox.io/s/hopeful-lumiere-yjgx2v?file=/index.js

棒，这个不错 @Yanyan-Wang

我尝试了下增加节点，在有嵌套 Combo 场景，节点 3 连接 Combo B 的表现不太符合预期 预期：Combo 作为虚拟节点，参与层次布局，默认水平居中对齐，Combo 内也使用层次布局，默认居中对齐 https://codesandbox.io/s/dazzling-water-84h43z?file=/index.js <img width="843" alt="image" src="https://github.com/antvis/G6/assets/37073056/2ae11b2e-0567-47fc-ae46-290e4ae926c0">

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭，因为 它已经过期很久了。 如果你仍然需要帮助，请创建一个新的 issue。