text: import G6 from '@antv/g6';
  
  /**
   * 该案例演示如何通过复写复写draw方法自定义折线。
   * by siogo 提供的 issue（https://github.com/antvis/g6/issues/814）
   *
   * 如果要适应所有拖动情况，则需要根据拖动的位置来动态改变锚点
   */
  G6.registerEdge('line-arrow', {
    options: {
      style: {
        stroke: '#ccc'
      }
    },
    draw: function draw(cfg, group) {
      const startPoint = cfg.startPoint;
      const endPoint = cfg.endPoint;
  
      const stroke = cfg.style && cfg.style.stroke || this.options.style.stroke;
  
      const keyShape = group.addShape('path', {
        attrs: {
          path: [[ 'M', startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, startPoint.y ], [ 'L', endPoint.x / 3 + 2 / 3 * startPoint.x, endPoint.y ], [ 'L', endPoint.x, endPoint.y ]],
          stroke,
          lineWidth: 1,
          startArrow: {
            path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
            d: 6
          },
          endArrow: {
            path: 'M 6,0 L -6,-6 L -3,0 L -6,6 Z',
            d: 6
          }
        },
        className: 'edge-shape',
        name: 'edge-shape'
      });
      return keyShape;
    }
  });
  
  const data = {
    nodes: [{
      id: '7',
      x: 150,
      y: 100,
      size: 40,
      anchorPoints: [[ 1, 0.5 ], [ 1, 0 ]]
    }, {
      id: '8',
      x: 300,
      y: 200,
      size: 40,
      anchorPoints: [[ 0, 0.5 ], [ 0, 1 ]]
    }],
    edges: [{
      source: '7',
      target: '8',
      sourceAnchor: 0,
      targetAnchor: 0
    }]
  };
  
  const width = document.getElementById('container').scrollWidth;
  const height = document.getElementById('container').scrollHeight || 500;
  const graph = new G6.Graph({
    container: 'container',
    width,
    height,
    modes: {
      // 支持的 behavior
      default: [ 'drag-node', 'drag-canvas' ]
    },
    defaultNode: {
      type: 'circle',
      style: {
        fill: '#DEE9FF',
        stroke: '#5B8FF9'
      },
      linkPoints: {
        left: true,
        right: true,
        fill: '#fff',
        stroke: '#1890FF',
        size: 3
      }
    },
    defaultEdge: {
      type: 'line-arrow',
      style: {
        stroke: '#F6BD16'
      }
    }
  });
  
  graph.data(data);
  graph.render();
  