javascript - 终止于 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 中实现有向网络节省大量时间。