D3.js 椭圆的D3力碰撞检测

全部,

我知道D3.js中有很多用于圆和矩形碰撞检测的示例

我试着做椭圆节点的力模拟

我尝试了下面的代码片段，它最初是用于矩形的，但它并不完美

var-width=960，
高度=500，
minSize=10，
最大尺寸=30；
var n=20，
m=10；
var color=d3.scaleOrdinal（d3.schemeCategory 10）
.域（d3.范围（m））；
var节点=d3.range（n）.map（函数（）{
var c=数学地板（数学随机（）*m），
rx=Math.sqrt（（c+1）/m*-Math.log（Math.random（））*（maxSize-minSize）+minSize，
ry=Math.sqrt（（c+1）/m*-Math.log（Math.random（））*（maxSize-minSize）+minSize，
d={color:c，rx:rx，ry:ry}；
返回d；
});
var collide=函数（alpha）{
var quadtree=d3.quadtree（）
.x（（d）=>d.x）
.y（（d）=>d.y）
.addAll（节点）；
nodes.forEach（（d）=>{
四叉树访问（（四叉树，x0，y0，x1，y1）=>{
设updated=false；
如果（quad.data&&（quad.data！==d））{
设x=d.x-quad.data.x，
y=d.y-四元数据.y，
xSpacing=（quad.data.rx+d.rx），
YSPACE=（quad.data.ry+d.ry），
absX=数学上的abs（x），
absY=数学上的abs（y），
l、 lx，ly；
if（absXMath.abs（ly））{
lx=0；
}否则{
ly=0；
}
d、 x-=x*=lx；
d、 y-=y*=ly；
quad.data.x+=x；
quad.data.y+=y；
更新=真；
}
}
更新的回报；
});
});
};
var force=d3.forceSimulation（）
.节点（节点）
.force（“中心”，d3.forceCenter（））
.force（“碰撞”（alpha）=>碰撞（alpha））
.力（“x”，d3.力x（）.强度（.01））
.力（“y”，d3.力（）.强度（.01））
.在（“滴答”，滴答）上；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.append（'g'）
.attr（'transform'，'translate（'+width/2+'，'+height/2+'））；
var eliple=svg.selectAll（“椭圆”）
.数据（节点）
.enter（）.append（“椭圆”）
.attr（“rx”，函数（d）{返回d.rx；}）
.attr（“ry”，函数（d）{return d.ry；}）
.style（“fill”，函数（d）{返回颜色（d.color）；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
。在（“结束”，dragended））；
函数tick（）{
椭圆
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
函数dragstarted（d）{
如果（！d3.event.active）force.alphaTarget（0.3.restart（）；
d、 x=d.x；
d、 y=d.y；
}
函数（d）{
d、 x=d3.event.x；
d、 y=d3.event.y；
}
函数d（d）{
如果（！d3.event.active）力α目标（0）；
d、 x=d3.event.x；
d、 y=d3.event.y；
}

---

这是我自己想出来的

这是d3的碰撞检测库

我在上面的存储库中附上了一个工作示例

谢谢