我想使用d3.js将标签放置在离节点固定的距离处,但要防止它们重叠。到目前为止,我使用带负电荷的基于力的布局来放置标签。我使用代码在矩形节点(Here)之间进行碰撞检测。
我需要的是修复标签与各自节点之间的距离。这是我的碰撞功能。此外,这是一个完整的JSfiddle
function collide(node) {
var n_width = node.bbox.width/2,
n_height = node.bbox.height/2,
nx1 = node.x - n_width,
nx2 = node.x + n_width,
ny1 = node.y - n_height,
ny2 = node.y + n_height;
return function(quad, x1, y1, x2, y2) {
if (quad.point && (quad.point !== node)) {
var dx = node.x - quad.point.x,
adx = Math.abs(dx),
dy = node.y - quad.point.y,
ady = Math.abs(dy),
mdx = quad.point.bbox.width/2 + n_width,
mdy = quad.point.bbox.height/2 + n_height;
/******** This part should be modified*********/
if (adx < mdx && ady < mdy) {
var l = Math.sqrt(dx * dx + dy * dy);
var lx = (adx - mdx) / l * 0.5
var ly = (ady - mdy) / l * 0.5
// choose the direction with less overlap
if (lx > ly && ly > 0) lx = 0;
else if (ly > lx && lx > 0) ly = 0;
dx *= lx
dy *= ly
node.x -= dx
node.y -= dy
quad.point.x += dx
quad.point.y += dy
}
}
return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
};
}