Two nodes that are far apart are connected using quadratic, and the edges are truncated partially

[nextDeve]

Describe the bug / 问题描述

两个相距较远的节点使用quadratic连接，边被截断一部分

Reproduction link / 重现链接

No response

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

import G6 from '@antv/g6'; const data = { edges: [ { source: '1191774', target: '1205096',

  style: { stroke: 'black' },
},
{
  source: '1205096',
  target: '1191774',

  style: { stroke: 'black' },
},
{
  source: '1192373',
  target: '1205096',

  style: { stroke: 'red' },
},
{
  source: '1224933',
  target: '1192373',

  style: { stroke: 'black' },
},
{
  source: '1191774',
  target: '1202358',

  style: { stroke: 'red' },
},
{
  source: '1202358',
  target: '1202368',
  style: { stroke: 'red' },
},
{
  source: '1202368',
  target: '1224933',
  style: { stroke: 'red' },
},

], nodes: [ { id: '1205096', label: '节点1', description: '节点1', }, { id: '1191774', label: '节点2', description: '节点2', }, { id: '1192373', label: '节点3', description: '节点3', }, { id: '1202358', label: '节点4', description: '节点4', }, { id: '1202368', label: '节点5', description: '节点5', }, { id: '1224933', label: '节点6', description: '节点6', }, ], };

const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500; const graph = new G6.Graph({ container: 'container', width, height, fitView: true, modes: { default: ['drag-canvas', 'drag-node'], }, layout: { type: 'dagre', rankdir: 'LR', align: 'UL', controlPoints: true, nodesepFunc: () => 1, ranksepFunc: () => 1, }, defaultNode: { size: [200, 80], type: 'modelRect', style: { lineWidth: 2, stroke: '#5B8FF9', fill: '#C6E5FF', }, }, defaultEdge: { type: 'quadratic', size: 1, color: '#e2e2e2', style: { radius: 20, }, }, }); graph.data(data); graph.render();

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

G6 Version / G6 版本

4.x

Operating System / 操作系统

macOS

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

[yvonneyx]

贴一下重现链接吧~

[yvonneyx]

4.x 中的内置 quadratic 边不支持设置 controlPoints，你可以将 layout 配置 controlPoints=false 关闭使用