D3.js 强制链接到节点边框

Question

我一直在尝试使用 D3.js，虽然这个问题可能听起来很傻，但我无法使图表中的链接指向节点边界而不是节点中心。

我一直在使用下面的jsfiddle来测试它，但是还是做不到...

http://jsfiddle.net/blonkm/zpcJa/40/light/

我想我必须更新 tick() 函数中的某些内容以返回不同的值：

function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = 0; // straight lines (0=straight, 1=round)
        // alternatively use dr = Math.sqrt(dx * dx + dy * dy); for similar arcs
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

  circle.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

  text.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
}

如果有人能指出正确的方向，我将不胜感激，谢谢！

Answer 1

让它看起来好像链接指向边界的技巧是先绘制链接，然后绘制它们顶部的节点。这样一来，圆圈会遮住通往中心的线段。

您所要做的就是重新排序代码，即将path 元素附加到circles 之前。

完整的演示here。