How to implement mutiple edges between nodes?

[kxxt]

I see that there is an old version of G6 where this could be solved by custom edge: http://g6-v3-2.antv.vision/en/docs/manual/FAQ/multi-line

But in v5, it seems that I cannot access the edge data when implementing a custom edge? How could I do it in v5?

[petercat-assistant[bot]]

In G6 version 5, implementing multiple edges between nodes can be achieved by customizing the edge rendering. Although the approach has changed from previous versions, you can still create custom edges by leveraging the new API and features available in G6 v5.

Here's a general approach to implement multiple edges between nodes in G6 v5:

1. Custom Edge Definition: You can define a custom edge by extending the built-in edge shapes. This allows you to control how the edges are rendered.

2. Accessing Edge Data: In G6 v5, you can access edge data within the custom edge's draw method. This is where you can manipulate the edge's appearance based on its data.

3. Using afterDraw Hook: Utilize the afterDraw hook to modify the edge after it has been drawn. This can be useful for adding additional visual elements or adjusting the edge's path.

Here's a basic example of how you might define a custom edge to handle multiple edges between nodes:

import G6 from '@antv/g6';

// Define a custom edge
G6.registerEdge('custom-edge', {
  draw(cfg, group) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;

    // Create a path for the edge
    const path = [
      ['M', startPoint.x, startPoint.y],
      ['L', endPoint.x, endPoint.y],
    ];

    // Draw the edge
    const keyShape = group.addShape('path', {
      attrs: {
        path,
        stroke: '#333',
        lineWidth: 2,
      },
    });

    return keyShape;
  },
  afterDraw(cfg, group) {
    // Access edge data and modify the edge if needed
    // Example: Add a label or additional visual elements
  },
});

// Initialize the graph
const graph = new G6.Graph({
  container: 'mountNode',
  width: 800,
  height: 600,
  defaultEdge: {
    type: 'custom-edge',
  },
  modes: {
    default: ['drag-canvas', 'zoom-canvas'],
  },
});

// Add nodes and edges
graph.data({
  nodes: [
    { id: 'node1', x: 100, y: 200 },
    { id: 'node2', x: 300, y: 200 },
  ],
  edges: [
    { source: 'node1', target: 'node2' },
    { source: 'node1', target: 'node2' }, // Multiple edges
  ],
});

graph.render();

This example demonstrates how to create a custom edge type and use it to render multiple edges between two nodes. You can further customize the appearance and behavior of the edges by modifying the draw and afterDraw methods.

If you have specific requirements or encounter any issues, feel free to ask for further assistance!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[kxxt]

It seems that could be done by this.context.graph.getEdgeData(this.id) but I am not sure if it is correct.

[kxxt]

It is called parallel edges in docs.

https://g6.antv.antgroup.com/manual/transform/build-in/process-parallel-edges