React项目中使用Antv-G6

男娘i 2022-11-29 12:07 378阅读 0赞

1.首先我们需要下载相关的依赖

npm install --save @antv/g6

2.页面组件中引入G6依赖

import G6 from '@antv/g6';

3.官网选择合适示例：复制核心代码块，dom容器的id值要和核心代码块中的容器属性值一致。  
**注：** 因为初始化graph需要等dom渲染之后，否则找不到container对应div容器。 **核心代码块需要放置在created之后的生命函数里，** 而不是直接在组件created阶段。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]  
**完整代码：**

import React, {  useEffect } from 'react';
    import G6 from '@antv/g6';
    import Hierarchy from '@antv/hierarchy';
    import style from './style.less';
    
    export const index = () => { 
      useEffect(() => { 
        var r = 50;
        var radius = Math.PI;
        var graph = new G6.Graph({ 
          container: 'mountNode',
          width: window.innerWidth,
          height: window.innerHeight,
          animate: true,
          animateCfg: { 
            duration: 1000,
            onFrame: function onFrame(node, ratio, toAttrs: any, fromAttrs: any) { 
              var current = radius * ratio;
              var x = fromAttrs.x;
              var y = fromAttrs.y;
              if (fromAttrs.x > toAttrs.x) { 
                x = x - r + r * Math.cos(current);
                y += r * Math.sin(current);
              } else { 
                x = x + r - r * Math.cos(current);
                y -= r * Math.sin(current);
              }
              return { 
                x: x,
                y: y,
              };
            },
          },
        });
        var node1 = graph.addItem('node', { 
          id: 'node1',
          x: 500,
          y: 300,
          shape: 'circle',
          style: { 
            fill: '#F04864',
            lineWidth: 2,
          },
        });
        var node2 = graph.addItem('node', { 
          id: 'node2',
          x: 400,
          y: 300,
          shape: 'circle',
          style: { 
            fill: '#40a9ff',
            lineWidth: 0,
          },
        });
        var count = 0;
        setInterval(function() { 
          var model = node1.get('model');
          if (count % 2 === 0) { 
            node1.get('model').x = 200;
            node2.get('model').x = 100;
          } else { 
            node1.get('model').x = 100;
            node2.get('model').x = 200;
          }
          count++;
          graph.refresh();
        }, 1000);
      }, []);
      return <div id={ 'mountNode'} className={ style.mountNode}></div>;
    };
    
    export default index;

**页面效果：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221124/737e5751d2064feb8c0050b56b25b8a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70 1]: /images/20221124/278e165cd11e4d399f58e8c407a55418.png