d3.js:固定距离处标签放置的碰撞检测

时间:2015-02-14 14:25:02

标签: javascript d3.js label collision-detection

我想使用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;
  };
}

0 个答案:

没有答案