使用linkCenter，且添加箭头偏移后，路径上的文字不能保持在路径中心 #4009

问题描述

1、我想要每个节点之间有多条边。 2、每条边都有箭头，指向目标节点的外圆（而不是圆心），这里我使用了 linkCenter 属性。 3、在我使用 path: G6.Arrow.triangle(8, 12, 48), d:48 进行箭头偏移后，发现边缘边上的文字不能满足“边穿过竖直方向中心”的需求，导致文字位置很别扭。

重现链接

https://codesandbox.io/s/cmv93n

重现步骤

1、进入页面：https://g6.antv.vision/zh/examples/item/multiEdge#multiEdges

2、复制以下代码，并执行

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      x: 50,
      y: 350,
      label: 'A',
    },
    {
      id: 'node2',
      x: 250,
      y: 150,
      label: 'B',
      size: [90]
    },
    {
      id: 'node3',
      x: 450,
      y: 350,
      label: 'C',
    },
  ],
  edges: [],
};

for (let i = 0; i < 10; i++) {
  data.edges.push({
    source: 'node1',
    target: 'node2',
    label: `${i}th edge of A-B`,
    style: {
      endArrow: {
        fill: "red",
        stroke: "red",
        path: G6.Arrow.triangle(8, 12, 48),
        d: 48,
      },
    },
  });
}
for (let i = 0; i < 5; i++) {
  data.edges.push({
    source: 'node2',
    target: 'node3',
    label: `${i}th edge of B-C`,
  });
}

G6.Util.processParallelEdges(data.edges);

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  // translate the graph to align the canvas's center, support by v3.5.1
  fitCenter: true,
  // the edges are linked to the center of source and target ndoes
  linkCenter: true,
  defaultNode: {
    type: 'circle',
    size: [40],
    color: '#5B8FF9',
    style: {
      fill: '#9EC9FF',
      lineWidth: 3,
    },
    labelCfg: {
      style: {
        fill: '#000',
        fontSize: 14,
      },
    },
  },
  defaultEdge: {
    type: 'quadratic',
    labelCfg: {
      autoRotate: true,
    },
  },
  modes: {
    default: ['drag-canvas', 'drag-node', "zoom-canvas"],
  },
  nodeStateStyles: {
    // style configurations for hover state
    hover: {
      fillOpacity: 0.8,
    },
    // style configurations for selected state
    selected: {
      lineWidth: 5,
    },
  },
});

graph.data(data);
graph.render();

预期行为

我希望A->B每条边上的文字可以不偏离，像C->B一样。而且箭头可以放在B的外圆上。

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.7.5 ]

屏幕截图或视频（可选）

补充说明（可选）

No response