链接和箭头终止于 D3 中节点的边界

Question

我的问题是如何创建一个网络可视化方案，使边缘和/或箭头终止于节点的边界。

我正在使用基于 Curved Links 基本模型的 D3.js 绘制有向图，并添加了此 other question 中所述的“标记”箭头。我的可视化中的节点根据它们的属性改变它们的大小和不透明度。这引入了两个问题：（1）当节点改变大小时，箭头不指向节点的边缘，以及（2）边缘的尾部在部分透明时通过节点出现。

对于第一个问题，有几个解决方案可用：this one 声称可以正确偏移箭头，但不会影响链接末端。也有解决方案的建议here，但我在那里没有看到任何实际完整的工作代码。 This JS fiddle 具有我想要的箭头外观，但代码相当不透明且不是模块化的，我可以弄清楚如何应用于我自己的案例。

正如我所说，我的链接是基于弯曲链接示例定义的：

graph.links.forEach(function(link) {
    var s = nodes[link.source],
        t = nodes[link.target],
        i = {}, // intermediate node
    property1 = link.property1;
    nodes.push(i);
    links.push({source: s, target: i}, {source: i, target: t});
    bilinks.push([s, i, t, property1]);
});

那么，如果我对 D3 工作原理的松散理解基本上是正确的，那么每个刻度线都会通过以下代码绘制链接：

force.on("tick", function() {
  link.attr("d", function(d) {
    if (d[0] == d[2]) {
      return "M" + d[0].x + "," + d[0].y
        + "A" + "20,20 -50 1,1 " + (1.001 * d[2].x) + "," + (1.001 * d[2].y) 
        ;
    } else {
     return "M" + d[0].x + "," + d[0].y
        + "S" + d[1].x + "," + d[1].y
        + " " + d[2].x + "," + d[2].y;
    }
  });
  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});

所以我的问题是如何更改此代码以实现通常所需的（我认为是正常的）可视化方案，以便边缘和/或箭头在节点的边界处终止，即使它们改变大小。

我创建了一个JS Fiddle，其中包含查看和解决问题所需的所有信息。它还包括调整箭头以匹配它们所在的链接，并且该功能需要与此问题的解决方案兼容。

Answer 1

由于我没有收到任何回复，所以我继续回答我自己的问题。结果，我想出的答案可能不是最好的，因为我对这一切还很陌生，但它可以工作并且类似于this answer...非常适合处理弯曲链接和反身链接。

必要更改的核心是以下代码：

force.on("tick", function() {
  link.attr("d", function(d) {
    diffX0 = d[0].x - d[1].x;
    diffY0 = d[0].y - d[1].y;
    diffX2 = d[2].x - d[1].x;
    diffY2 = d[2].y - d[1].y;
    pathLength01 = Math.sqrt((diffX0 * diffX0) + (diffY0 * diffY0));
    pathLength12 = Math.sqrt((diffX2 * diffX2) + (diffY2 * diffY2));
    offsetX0 = 1.00 * (diffX0 * d[0].group ) / pathLength01;
    offsetY0 = 1.00 * (diffY0 * d[0].group) / pathLength01;
    offsetX2 = (4.0 * (diffX2 / Math.abs(diffX2) )) + ((diffX2 * d[2].group) / pathLength12);
    offsetY2 = (4.0 * (diffY2 / Math.abs(diffY2) )) + ((diffY2 * d[2].group) / pathLength12);

    if (d[0] == d[2]) {
     return "M" + (d[0].x) + "," + (d[0].y - d[0].group)
        + "A" + "20,23 -50 1,1 "
        + " " + (d[2].x + (5.0 * 0.866) + (0.866 * d[2].group)) 
        + "," + (d[2].y + (5.0 * 0.5) + (0.5 * d[2].group));
    } else {
     return "M" + (d[0].x - offsetX0) + "," + (d[0].y - offsetY0)
        + "S" + (1.01 * d[1].x) + "," + (1.01 * d[1].y)
        + " " + (d[2].x - offsetX2) + "," + (d[2].y - offsetY2);
    }
  });
  node.attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });
});

这设计用于箭头标记偏移量为 6（即.attr("refX", 6)），因此链接的末端几乎位于箭头的中间，并且箭头向节点延伸约 4 个单位。因此，箭头和链接尾部与节点边界的偏移量不同，因此，如果您不使用有向图，则需要调整目标端的偏移量以匹配源端并使它们都位于边界上。

这是一个updated JSFiddle，其中包含执行定向力布局所需的所有功能，其中包括：

• 具有透明度的 JSON 节点属性的颜色圆圈
• 通过 JSON 链接属性为弯曲边缘和箭头着色
• 链接在节点边界开始和结束，因此它们不会与开始/结束节点重叠
• 匹配反身边的样式（即源和目标是同一个节点）
• 还支持更改边缘厚度和透明度

您还需要针对自己的应用程序进行一些其他调整。例如，我在我的节点数据中添加了一个radius 变量，其中包括将属性（当前为group）正确缩放到圆半径，然后对于圆它是.attr("r", function(d) { return d.radius;}。我想不出办法让节点的圆的r 用于强制功能（我更喜欢，如果有人能弄清楚，我会很高兴），所以这是我的解决方法。

我认为这包含了许多可视化功能，我希望这些功能可以成为 D3 等工具的标准功能，但实际上却无法找到并且有些难以实现。但是现在已经完成了，我希望这可以为其他人节省大量时间来在 D3 中实现有向网络。

Answer 2

这有一个非常简单的解决方案。

1) 最后画出你的节点。这样您的节点将位于 svg 的顶部，并将隐藏其中的任何链接部分。

2) 如果您要更新节点和链接，请遵循相同的模式并最后更新您的节点。