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。

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

1 个答案: