简要:最近要用AntV的G6与VueCli兼容,但是找来找去 并没有找到关于节点展开的方法,所以就干脆自己写了一个
一、效果图
注:双击鼠标左键展开节点,鼠标右键关闭节点。
二、思路
- 首先我们要明确我们的需求是在该节点四周展示子节点,我的做法是以父节点为圆心,连接线长度为半径®画圆,在圆上随机生成坐标赋值给子节点,从而达到展开节点效果。
- 从官方的api中我们可以获取到鼠标双击节点的事件与右键单击事件。
- 通过打印事件参数,我们可以获取到当前节点的中心点坐标,记为Cx,Cy
- 此时我们就可以来随机计算圆上的坐标了。
三、解题步骤
问题:已知坐标系中某一点的中心坐标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
}
}
五、存在问题
- 当子节点过多时会存在节点重合问题,后续文章中会提供解决办法。
- 无动画效果。