antvis/G6

多条边,的起始和终点一样,是否可以避免重叠 #6090

opomi posted onGitHub

Describe the bug / 问题描述

image 类似于图里,这些边,起始和终点一样。但是重叠在一起了,导致名称tip也全都重叠了 我没有找到避免边重叠的相关配置

No response

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

用的布局是forceAtlas2,能否有可能,从布局上解决这个问题呢

G6 Version / G6 版本

4.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response


可以看这个示例 https://g6-v4.antv.vision/examples/item/multiEdge#multiEdges

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'node1',
      x: 50,
      y: 350,
      label: 'A',
    },
    {
      id: 'node2',
      x: 250,
      y: 150,
      label: 'B',
    },
    {
      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`,
  });
}
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'],
  },
  nodeStateStyles: {
    // style configurations for hover state
    hover: {
      fillOpacity: 0.8,
    },
    // style configurations for selected state
    selected: {
      lineWidth: 5,
    },
  },
});

graph.data(data);
graph.render();
posted by jinmmd about 1 month ago

Fund this Issue

$0.00
Funded

Pull requests