直接碰撞检测d3js

我试图在我的svg强制布局（d3js）中创建碰撞检测。 我已经按照本教程进行了圆形碰撞。

由于某种原因，它不适用于rect形状。 我试图在面纱中玩参数。

这是我的代码：

 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 dx; }) .attr("y", function(d) { return dy; }); 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(" + dx + "," + dy + ")"; }); }); 

和碰撞function：

 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  nx2 || x2  ny2 || y2 < ny1; }; } 

如何检测rect的碰撞？

谢谢！！！

Answer 1

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移动彼此远离彼此，以更好地匹配我自己的情况所需的。