对比设计效果，测试小姐姐提了几条建议：
通读Antv官网后，了解到AntV图可视分析解决案分为三大类，即对统计数据、关系数据、地理数据的可视化解决案，对应的开源技术分别是：G2/G2Plot/S2、G6/Graphin/X6/XFlow、L7/L7Plot等。基于侧重展示还是侧重编辑，可以分为图可视化引擎和图编辑引擎。基于侧重的前端技术栈，可以分为：Vue和React等。
我们的指标数据，属于关系数据，侧重于图可视化，且前端技术栈为Vue全家桶，因此最终选择G6作为我们的可视化引擎。
由于我们的指标体系，是具有父子层级关系的数据，且业务团队在调研时倾向于使用思维脑图，于是最终选定：脑图布局（mindmap）。
当前实例化选项为：
实例化选项中设置了fitView=true，也就是自适应视口。因此，只有一个节点时，节点变得非常大；节点很多时，节点变得很小。
在G6的事件中，event会包含当前鼠标操作位置的三种坐标值，它们的变量名与上述三种坐标系对应关系如下：
可以发现后两者的名字是直接对应的，我们只需要注意event中的x和y对应的是pointX/pointY坐标系。
官方推荐两种挂载悬浮DOM的方式：挂载在body上、挂载在ContainerDOM上。我们选择了后者，即与canvas标签同一父容器。
graph.on('canvas:click',event=>{menuDOM.style.marginLeft=event.canvasX;menuDOM.style.marginTop=event.canvasY;});在某个节点的位置上放置DOM：constnode=graph.getNodes()[0];const{x,y}=node.getModel();//获得该节点的位置，对应pointX/pointY坐标constcanvasXY=graph.getCanvasByPoint(x,y);menuDOM.style.marginLeft=canvasXY.x;menuDOM.style.marginTop=canvasXY.y;注意：如果使用了错误的坐标系来给定悬浮DOM元素的位置，将会出现偏移，在图有缩放、平移等变化时，偏移更加严重。
因此，只需要将实例化选项中布局的横向间距和纵向间距调小就可以了：
节点内部所有图形使用相对于节点自身的坐标系，即(0,0)是该节点的中心。而节点的坐标是相对于画布的，由该节点group上的矩阵控制，自定义节点中不需要用户感知。若在自定义节点内增加rect图形，要注意让它的x与y各减去其长与宽的一半。
当定义了update方法，则不论是否指定registerNode的第三个参数，在节点更新时都会执行复写的update函数逻辑。
在G63.3及之后的版本中，必须指定name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性。
我们在实现mindmap-child-node的过程中，重写了update方法，找到需要更新的shape进行更新，从而优化性能。寻找需要更新的图形可以通过：
group.get('children')[0]找到关键图形keyShape，也就是draw方法返回的shapegroup.get('children')找到节点的所有图形数组，然后可以通过图形name进行查找下面代码仅更新了mindmap-child-node的展开收起按钮的图标：
（左）没有设置锚点时，（右）设置了锚点后。
getAnchorPoints方法仅在需要限制与边的连接点时才需要复写，也可以在数据中直接指定。
getAnchorPoints(){return[[0,0.5],//左侧中间[1,0.5],//右侧中间];}关于stateG6中的state，指的是节点或边的状态，包括交互状态和业务状态两种。说明如下：
在G6中，有三种方式配置不同状态的样式：
建议使用graph.clearItemStates来取消graph.setItemState设置的状态。
graph.clearItemStates支持一次取消单个或多个状态。graph.setItemState(item,'bodyState','health');graph.setItemState(item,'selected',true);graph.setItemState(item,'active',true);//取消单个状态graph.clearItemStates(item,'selected');graph.clearItemStates(item,['selected']);//取消多个状态graph.clearItemStates(item,['bodyState:health','selected','active']);关于图标和增加节点对比度所有节点图标更换为svg格式，避免失真；文本颜色调整为纯黑；调整节点边框颜色，并增加阴影，格式如下：attrs:{//...//其他属性stroke:'rgba(76,125,254,0.48)',shadowOffsetX:0,shadowOffsetY:4,shadowBlur:16,shadowColor:'rgba(76,125,254,0.48)'}4.8自定义边下面使我们开发的自定义边代码：
因此，G6还提供了自定义交互行为的机制，方便用户开发更加定制化的交互行为。