v5的create-edge功能如何设置从锚点上拖出连线

[ZTao-z]

v5的create-edge功能如何设置从锚点上拖出连线

[petercat-assistant[bot]]

在 G6 v5 中，要设置从锚点上拖出连线，可以通过配置节点的 ports 属性来实现。以下是一个简单的示例代码，展示如何设置节点的锚点以及如何从锚点上拖出连线：

createGraph(
  {
    data: {
      nodes: [
        { id: 'node1', label: 'Node 1' },
        { id: 'node2', label: 'Node 2' }
      ],
      edges: []
    },
    node: {
      style: {
        fill: '#f8f8f8',
        stroke: '#8b9baf',
        lineWidth: 1,
        port: true,
        ports: [
          { placement: 'top' },
          { placement: 'bottom' },
          { placement: 'left' },
          { placement: 'right' }
        ],
      },
    },
    edge: {
      type: 'cubic-horizontal',
      style: {
        stroke: '#7e3feb',
        lineWidth: 2,
      },
    },
    behaviors: ['drag-canvas', 'drag-element'],
    layout: { type: 'grid', cols: 2 },
    plugins: [{ type: 'grid-line', size: 30 }],
  },
  { width: 600, height: 300 },
  (gui, graph) => {
    gui.add({ type: 'cubic-horizontal' }, 'type').disable();
  },
);

在这个示例中，节点配置了多个锚点（ports），可以从这些锚点上拖出连线。edge.type 设置为 cubic-horizontal，表示使用水平方向的三次贝塞尔曲线来绘制边。

如果你有更多问题或需要进一步的帮助，请随时告诉我！

🪧 Tips

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

[2200000372-fairyame]

可以告诉我如何链接两个node吗？找了几天解决方法了，不能同时使用drag-element和create-edge呀，这两个是冲突的。我使用了ports，该如何从port连线出来呢？drag事件中好像区分不了，targetType都是node