How to use the @antv/g6.Graph function in @antv/g6

//   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)'
    }
  }
});

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'

});
      });

      response.body.edges.forEach((x) => {
        source.edges.push({
          source: x.key,
          target: x.stringValue,
        });
      });

      if (this.topology_chart != null) {
        this.topology_chart.changeData(source);
        return;
      }

      this.topology_chart = new G6.Graph({
        container: "main-chart",
        width: document.getElementById("main-chart").scrollWidth,
        height: document.getElementById("main-chart").scrollHeight,
        layout: {
          type: "force",
          preventOverlap: true,
          nodeSize: 100,
          linkDistance: 120,
        },
        modes: {
          default: ["drag-canvas", "zoom-canvas", "drag-node"],
        },
        defaultNode: {
          size: 50,
          color: "#5B8FF9",
          style: {

target: '5'
  }, {
    source: '4',
    target: '6'
  }, {
    source: '5',
    target: '6'
  }]
};

const tipDiv = document.createElement('div');
const graphDiv = document.getElementById('container');
graphDiv.appendChild(tipDiv);
const width = graphDiv.scrollWidth;
const height = graphDiv.scrollHeight;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  layout: {
    type: 'force',
    preventOverlap: true,
    nodeSize: 20
  },
  modes: {
    default: [ 'drag-node' ]
  },
  defaultNode: {
    size: 20,
    style: {
      fill: '#C6E5FF',
      stroke: '#5B8FF9'

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'star',
      label: 'Star',
      x: 250,
      y: 200
    }
  ]
};

const graph = new G6.Graph({
  container: 'container',
  width: 500,
  height: 500,
  defaultNode: {
    shape: 'star',
    size: [ 120, 60 ],
    style: {
      fill: '#9EC9FF',
      stroke: '#5B8FF9',
      lineWidth: 3
    },
    labelCfg: {
      style: {
        fill: '#1890ff',
        fontSize: 18
      },

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'diamond',
      label: 'Diamond',
      x: 250,
      y: 150
    }
  ]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    shape: 'diamond',
    size: [ 150, 100 ],
    style: {
      fill: '#9EC9FF',
      stroke: '#5B8FF9',
      lineWidth: 3
    },
    labelCfg: {
      style: {
        fill: '#1890ff',
        fontSize: 18
      },

{ cat: 'cal', values: [ 50, 10, 20, 70, 30 ], color: '#9270CA' }
      ],
      centerColor: '#5b8ff9'
    }
  ],
  edges: [
    {
      source: 'nodeD',
      target: 'nodeD2'
    }
  ]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height
});

graph.data(data);
graph.render();

const heatValue = heatValuesMap[node.id]
            return {
              ...node,
              description: `${node.description}<br><b>Heat: </b>${heatValue.heat}`,
              style: {
                lineWidth: 1,
                fill: colorScale(heatValue.heat)
              }
            }
          }
          return node
        })
      }

      /*pic*/
      const graph = new G6.Graph({
        container: ReactDOM.findDOMNode(ref.current),
        width: window.innerWidth,
        height: window.innerHeight,

        defaultNode: {
          size: [60, 25],
          shape: 'rect'
        },
        defaultEdge: {
          size: 2,
          color: '#e2e2e2',
          style: {
            endArrow: {
              path: 'M 4,0 L -4,-4 L -4,4 Z',
              d: 4
            }

label: '节点2',
    labelCfg: {
      position: 'left',
      offset: 10
    }
  }],
  edges: [{
    source: 'node1',
    target: 'node2'
  }
  ]
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  defaultNode: {
    size: 45,
    style: {
      fill: '#DEE9FF',
      stroke: '#5B8FF9'
    }
  },
  defaultEdge: {
    shape: 'circle-running',
    style: {
      lineWidth: 2,
      stroke: '#bae7ff'
    }