How to use @antv/g6 - 10 common examples

//   draw(cfg, group) {
//     const data = cfg.data;
//     // console.log(data, path(data));
//     const shape = group.addShape('path', {
//       attrs: {
//         stroke: 'rgba(0,0,0,0.1)',
//         lineWidth: Math.max(1, data.dy),
//         path: path(data)
//       }
//     });
//     return shape;
//   }
// },
// 'line');

const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    style: {
      stroke: null
    }
  },
  edgeStateStyles: {
    active: {
      stroke: 'rgba(0,0,0,0.3)'
    }
  }
});

const Base = require('../base');
const Util = require('@antv/g6').Util;
const Numeric = require('numericjs');

class Mds extends Base {
  getDefaultCfgs() {
    return {
      maxIteration: null,         // 停止迭代的最大迭代数
      center: [ 0, 0 ],           // 布局中心
      linkDistance: 50,           // 默认边长度
      onLayoutEnd() {},           // 布局完成回调
      onTick() {}                 // 每一迭代布局回调
    };
  }
  init() {
    const graph = this.get('graph');
    const onTick = this.get('onTick');
    const tick = () => {

const dagreLayout = (data: Data, options: DagreLayoutOption): Data => {
    const source = cloneDeep(data);
    // eslint-disable-next-line new-cap
    const layout = new G6.Layout.dagre({
        type: 'dagre',
        ...options,
    });

    layout.init(source);
    layout.execute();
    return {
        nodes: layout.nodes,
        edges: data.edges,
    };

    // graph.positionsAnimate();
};
export default dagreLayout;

nodes.forEach(function(node, i) {
    if (i <= 16 && i !== 12) {
      newNodes.push(node);
      newNodeMap.set(node.id, i);
    }
  });
  // add related edges
  edges.forEach(function(edge) {
    const sourceId = edge.source;
    const targetId = edge.target;
    if (newNodeMap.get(sourceId) !== undefined && newNodeMap.get(targetId) !== undefined) {
      newEdges.push(edge);
    }
  });

  const subForceLayout = new G6.Layout.force({
    center: [ nodes[0].x, nodes[0].y ],
    linkDistance: 70,
    preventOverlap: true,
    nodeSize: 20,
    tick: function tick() {
      // the tick function to show the animation of layout process
      graph.refreshPositions();
    }
  });
  subForceLayout.init({
    nodes: newNodes,
    edges: newEdges
  });
  subForceLayout.execute();
}, 1000);

const radialLayout = (data: Data, options: RadialLayoutOption) => {
    const source = cloneDeep(data);
    // eslint-disable-next-line new-cap
    const layout = new G6.Layout.radial({
        ...options,
    });

    layout.init(source);
    layout.execute();

    return {
        nodes: layout.nodes,
        edges: data.edges,
    };
};
export default radialLayout;

useEffect(() => {
    if (!graph) {
      graph = new G6.Graph({
        container: 'container',
        width,
        height,
        // translate the graph to align the canvas's center, support by v3.5.1
        fitCenter: true,
        defaultNode: {
          type: 'circle',
          size: [40],
          color: '#5B8FF9',
          style: {
            fill: '#9EC9FF',
            lineWidth: 3,
          },
          labelCfg: {
            style: {
              fill: '#1890ff',

}, {
    id: '3',
    x: 350,
    y: 250
  }],
  edges: [
  // 配置内置折线的弯折弧度、端点最小距离
    {
      source: '2',
      target: '3'
    }]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    style: {
      fill: '#DEE9FF',
      stroke: '#5B8FF9'
    }
  },
  defaultEdge: {
    shape: 'polyline',
    style: {
      radius: 10,
      offset: 30,
      endArrow: true,
      stroke: '#F6BD16'

// 左上
        [ 'M', -width / 2, -height / 2 ],
        // 右上
        [ 'L', width / 2, -height / 2 ],
        // 右下
        [ 'L', width / 2, height / 4 ],
        // 下拐角
        [ 'L', width / 4, height / 4 ],
        [ 'L', 0, height / 2 ],
        [ 'L', 0, height / 4 ],
        // 左下
        [ 'L', -width / 2, height / 4 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定，所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }

// 左上
        [ 'M', -width / 2, -height / 2 ],
        // 右上
        [ 'L', width * 3 / 8, -height / 2 ],
        // 右顶点
        [ 'L', width / 2, 0 ],
        // 右下
        [ 'L', width * 3 / 8, height / 2 ],
        // 左下
        [ 'L', -width / 2, height / 2 ],
        // 左顶点
        [ 'L', -width * 3 / 8, 0 ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定，所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }

// 右上顶点
        [ 'L', width / 2 - r, -height / 2 ],
        // 右上弧
        [ 'Q', width / 2, -height / 2, width / 2, -height / 2 + r ],
        // 右下顶点
        [ 'L', width / 2, height / 2 - r ],
        // 右下弧
        [ 'Q', width / 2, height / 2, width / 2 - r, height / 2 ],
        // 左下顶点
        [ 'L', -width / 2 + r, height / 2 ],
        // 左下弧
        [ 'Q', -width / 2, height / 2, -width / 2, height / 2 - r ],
        [ 'Z' ]
      ]
      const color = cfg.color || Global.defaultNode.color
      const style = Util.mix({}, Global.defaultNode.style, {
        // 节点的位置在上层确定，所以这里仅使用相对位置即可
        x,
        y,
        width,
        height,
        path,
        stroke: color
      }, cfg.style)
      return style
    }
  }