Antd G6实现自定义工具栏

       在使用g6实现知识图谱可视化中，产品经理提出了有关图谱操作的不少功能，需要放置在工具栏中，其中有些功能不在g6自带的功能里，且工具栏样式、交互效果也和官方自定义工具栏不同。那我们怎么去实现呢？

        g6官方的工具栏案例是这样：G6，提供了“重做”，”撤销“，”放大“，”缩小“，”适应屏幕“，”实际大小“的操作，配置项中也提供了有关样式及操作的回调功能，但是，远不能满足我们产品需要的样式及功能。

        产品的需求中，工具栏各操作需要有激活和未激活的效果，悬浮的效果等等。操作除了官方工具栏自带的操作，还需”高亮“，”鱼眼放大镜“，”布局“，”下载“，”关系标签显隐“的功能。

       那我们就给工具栏换个新包装吧！话不多说，看效果，上代码。

        上述代码中，我们根据业务需求做了工具栏整体的显示隐藏，展开收起，关系显隐，图片下载等功能。工具栏面板我们可以根据自己系统使用的组件库，ant design 、element ui或者其他。添加图标，提示框，选中等效果。这里不多赘述。

        那么，怎么将g6的功能添加到我们工具栏上面使用呢？

        我们定义了一组响应式对象，用来存储当前激活的工具或效果。

const graphState = reactive({
      layout: {
        type: 'force2',
        advanceWeight: false,
        damping: 0.8,
        kr: 1000,
        preset: {
          minNodeSpacing: 10,
          nodeSize: 10,
          type: 'concentric',
        },
        clustering: true,
        animate: false,
        preventOverlap: true,
        clusterNodeStrength: 35,
        distanceThresholdMode: 'max',
        minMovement: 10,
        maxSpeed: 1000,
        linkDistance: 50,
        edgeStrength: 200,
        nodeStrength: 1000,
        nodeWeightFieldScale: 1,
        nodeWeightFromType: 'node',
        fitCenter: true,
      },
      showTool: false,
      activeTool: '',  //当前激活的工具
      enableFishEye: false, //是否启用鱼眼放大镜
      relation: false, //是否开启高亮相邻节点
      enableLegend: false, //是否开启图例
      relationVisible: true, //关系标签显示隐藏
      collapse: false,  //展开或折叠工具栏
    });

           引入G6，定义graph,用来初始化G6实例，再初始化G6的工具栏 

import G6 from '@antv/g6';

let graph;
let toolbar = new G6.ToolBar({
      className: 'g6-component-toolbar',
    });

         通过动态的给graph 实例添加插件、添加行为动作，达到调用工具栏功能的目的。

const handleClickTool = code => {
      if (toolbar.destroyed) {
        toolbar = new G6.ToolBar({
          className: 'g6-component-toolbar',
        });
        graph.addPlugin(toolbar);
      }
      if (code === 'zoomOut') {
        toolbar.zoomOut();
        //...
      } else if (code === 'zoomIn') {
        toolbar.zoomIn();
       //...
      } 
      //...
      graph.fitCenter();
      graphState.activeTool = code;
    };

           其他功能实现读者可查询G6官网API自行实现。这里只简述思路和原理。