javascript - 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 元素附加到 circle 之前。

完整演示 here .