AntV G6 + Vue cli 节点展开/节点扩散/节点添加 超简单教程 -- 柚子真好吃

简要：最近要用AntV的G6与VueCli兼容，但是找来找去 并没有找到关于节点展开的方法，所以就干脆自己写了一个

一、效果图

注：双击鼠标左键展开节点，鼠标右键关闭节点。

二、思路

1. 首先我们要明确我们的需求是在该节点四周展示子节点，我的做法是以父节点为圆心，连接线长度为半径®画圆，在圆上随机生成坐标赋值给子节点，从而达到展开节点效果。
2. 从官方的api中我们可以获取到鼠标双击节点的事件与右键单击事件。
   
3. 通过打印事件参数，我们可以获取到当前节点的中心点坐标，记为Cx，Cy
   
4. 此时我们就可以来随机计算圆上的坐标了。

三、解题步骤

问题：已知坐标系中某一点的中心坐标Cx，Cy，圆的半径为R，求距离圆心距离为R的圆上得任意一点坐标X，Y。

解:以中心点为坐标原点，建立平面直角坐标系，设Rx为横坐标上随机一点。

1.当随机点落在一、二象限时坐标为

X = Cx + Rx  
Y = Cy - √(R^2 - Rx^2)

2.当随机点落在三、四象限时坐标为

X = Cx + Rx  
Y = Cy + √(R^2 - Rx^2)

四、功能代码

//获取随机点坐标
getRandomPosition: function(e, graph) {
		//e--当前节点对象   graph--G6.Graph对象
        //生成的坐标点
        let X = 0;
        let Y = 0;
        //获取半径
        let R = graph.cfg.layout.linkDistance;
        if (R == undefined) {
          R = 130;
        }

        let Cx = parseInt(e.item._cfg.model.x);
        let Cy = parseInt(e.item._cfg.model.y);

        //随机横坐标
        let Rx = parseInt(Math.floor(Math.random() * R * 2) + 1 - R);
        //1- 一二象限 2-三四象限
        let qd = Math.floor(Math.random() * 2) + 1;

        if (qd == 1) {
          X = Cx + Rx;
          Y = Cy - parseInt(Math.sqrt(R * R - Rx * Rx));
        } else {
          X = Cx + Rx;
          Y = Cy + parseInt(Math.sqrt(R * R - Rx * Rx));
        }

        return {
          x: X,
          y: Y
        }
      }

五、存在问题

1. 当子节点过多时会存在节点重合问题，后续文章中会提供解决办法。
2. 无动画效果。