[英]rect collision detection d3js
我試圖在我的svg
強制布局(d3js)中創建碰撞檢測。 我已經按照本教程進行了圓形碰撞。
由於某種原因,它不適用於矩形。 我試着在面紗中玩參數。
這是我的代碼:
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node
.append("rect")
.attr("class", "tagHolder")
.attr("width", 60)
.attr("height", 60)
.attr("rx", 5)
.attr("ry", 5)
.attr("x", -10)
.attr("y", -10);
還有這個:
svg.selectAll(".node")
.attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; });
link.attr("x1", function(d)
{
return d.source.x;
})
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d)
{
return "translate(" + d.x + "," + d.y + ")";
});
});
和碰撞功能:
function collide(node) {
var r = 30,
nx1 = node.x - r,
nx2 = node.x + r,
ny1 = node.y - r,
ny2 = node.y + r;
return function(quad, x1, y1, x2, y2)
{
if (quad.point && (quad.point !== node))
{
var x = node.x - quad.point.x,
y = node.y - quad.point.y,
l = Math.sqrt(x * x + y * y),
r = 30 + quad.point.radius;
if (l < r)
{
l = (l - r) / l * .5;
node.x -= x *= l;
node.y -= y *= l;
quad.point.x += x;
quad.point.y += y;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}
如何檢測rect的碰撞?
謝謝!!!
d3示例中的碰撞函數通過比較它們的中心之間的距離l = Math.sqrt(x * x + y * y)
與它們的半徑之和r = node.radius + quad.point.radius
來計算圓的重疊。 。 當l < r
,圓圈重疊並且兩個圓圈彼此遠離以校正重疊。
矩形的類似碰撞函數以相同的方式工作,通過計算矩形的重疊並使每個矩形移動遠離另一個:
function collide(node) {
var nx1, nx2, ny1, ny2, padding;
padding = 32;
nx1 = node.x - padding;
nx2 = node.x2 + padding;
ny1 = node.y - padding;
ny2 = node.y2 + padding;
return function(quad, x1, y1, x2, y2) {
var dx, dy;
if (quad.point && (quad.point !== node)) {
if (overlap(node, quad.point)) {
dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x) / 2;
node.x -= dx;
quad.point.x += dx;
dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y) / 2;
node.y -= dy;
quad.point.y += dy;
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
};
寬度重疊為dx = Math.min(node.x2 - quad.point.x, quad.point.x2 - node.x) / 2;
其中高度重疊為dy = Math.min(node.y2 - quad.point.y, quad.point.y2 - node.y) / 2;
這表明你的節點必須知道矩形的兩個角:左上角(x, y)
和右下角(x2, y2)
。
請在此處查看完整示例: http : //bl.ocks.org/dobbs/1d353282475013f5c156 。 該示例使用coffeescript,並且僅沿着y軸'cos移動彼此遠離彼此,以更好地匹配我自己的情況所需的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.