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）如果要更新节点和链接，请遵循相同的模式并最后更新节点。

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

2 个答案: