react g6 怎么让节点在一个节点外面围成一个圈

Question

react g6 怎么让节点在一个节点外面围成一个圈
文档：react g6 怎么让节点在一个节点外面围?..
链接：http://note.youdao.com/noteshare?id=4d2752990346d23193ef9766eb3feb89&sub=5AB99637377D405AB3330C8FB6FEB2E7

比如

这个代码不是正的圈

import React, { useEffect } from 'react';
import G6 from '@antv/g6';

const NodeGraph = () => {
  useEffect(() => {
    // 创建 G6 图实例
    const graph = new G6.Graph({
      container: 'graph-container', // 图容器的 ID
      width: 800,
      height: 600,
      layout: {
        type: 'circular', // 使用 circular 布局
        center: [400, 300], // 岗位节点的坐标
        radius: 200, // 节点围成的圆的半径
        startAngle: Math.PI, // 开始角度，这里设为 Math.PI，使节点环绕岗位节点
      },
      defaultNode: {
        size: [60, 30],
        style: {
          fill: '#5B8FF9',
          stroke: '#5B8FF9',
          radius: 5,
        },
      },
      defaultEdge: {
        style: {
          endArrow: true,
        },
      },
      modes: {
        default: ['drag-canvas', 'zoom-canvas','drag-node'], // 添加 'drag-node' 模式
      },
    });

    // 为岗位节点设置特殊样式
    graph.node(function (node) {
      if (node.type === 'position-node') {
        return {
          size: [80, 40],
          style: {
            fill: '#F6BD16',
            stroke: '#F6BD16',
            radius: 10,
          },
        };
      }
      return {};
    });
    const data = {
      nodes: [
        { id: 'ability1', label: '能力1' },
        { id: 'ability2', label: '能力2' },
        { id: 'ability3', label: '能力3' },
        { id: 'ability4', label: '能力4' },
        { id: 'ability5', label: '能力5' },
        // 添加更多的能力节点...
        { id: 'position', label: '岗位', type: 'position-node' }, // 岗位节点
      ],
      edges: [
        { source: 'position', target: 'ability1', label: '需要' },
        { source: 'position', target: 'ability2', label: '需要' },
        { source: 'position', target: 'ability3', label: '需要' },
        { source: 'position', target: 'ability4', label: '需要' },
        { source: 'position', target: 'ability5', label: '需要' },
        // 添加更多的连接边...
      ],
    };
    
    // 加载数据
    graph.data(data);
    graph.render();
  }, []);

  return <div id="graph-container" />;
};

export default NodeGraph;

Answer 1

import React, { useEffect } from 'react';
import G6 from '@antv/g6';
import Data from './data';

const NodeGraph = () => {
  useEffect(() => {
    // 创建 G6 图实例
    const graph = new G6.Graph({
      container: 'graph-container', // 图容器的 ID
      width: 800,
      height: 600,
      layout: {
        type: 'customCircular', // 使用自定义的圆形布局
        center: [400, 300], // 岗位节点的坐标
        radius: 200, // 节点围成的圆的半径
        startAngle: Math.PI, // 开始角度，这里设为 Math.PI，使节点环绕岗位节点
      },
      defaultNode: {
        size: [60, 30],
        style: {
          fill: '#5B8FF9',
          stroke: '#5B8FF9',
          radius: 5,
        },
      },
      defaultEdge: {
        style: {
          endArrow: true,
        },
      },
      modes: {
        default: ['drag-canvas', 'zoom-canvas','drag-node'],
      },
    });

    // 为岗位节点设置特殊样式
    graph.node(function (node) {
      if (node.type === 'position-node') {
        return {
          size: [80, 40],
          style: {
            fill: '#F6BD16',
            stroke: '#F6BD16',
            radius: 10,
          },
        };
      }
      return {};
    });

    // 自定义布局：将能力节点围成一个圆形
    G6.registerLayout('customCircular', {
      /**
   * 初始化
   * @param {object} data 数据
   */
  init(data) {
    console.log("data init");
    console.log(data);

    const self = this;
    self.nodes = data.nodes;
    self.edges = data.edges;
    self.data = data;
  },
      execute() {
        console.log("this");
        console.log(this);

        let data=this.data
        console.log("data");
        console.log(data);

        const nodeCount = data.nodes.length - 1; // 减去1是因为要排除岗位节点
        const center = data.nodes.find(node => node.type === 'position-node');
        const radius = 200;

        data.nodes.forEach((node, i) => {
          if (node.type !== 'position-node') {
            const angle = (Math.PI * 2 * i) / nodeCount;
            const x = center.x + radius * Math.cos(angle);
            const y = center.y + radius * Math.sin(angle);
            node.x = x;
            node.y = y;
          }
        });
      },
    });

    let data=
    Data.data
    // 加载数据
    graph.data(data);
    graph.render();
  }, []);

  return <div id="graph-container" />;
};

export default NodeGraph;