G6 icon indicating copy to clipboard operation
G6 copied to clipboard

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

Open nextDeve opened this issue 1 year ago • 1 comments

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

nextDeve avatar Oct 11 '24 07:10 nextDeve

贴一下重现链接吧~

yvonneyx avatar Oct 12 '24 05:10 yvonneyx

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

yvonneyx avatar Oct 25 '24 08:10 yvonneyx

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information. | 由于该 issue 缺少关键信息且已闲置 7 天,现已自动关闭。如需重新打开此问题,请提供所缺失的信息。。

github-actions[bot] avatar Dec 17 '24 12:12 github-actions[bot]