在 D3 中的節點邊界處終止的鏈接和箭頭

Question

我的問題是如何創建一個網絡可視化方案，使邊和/或箭頭終止於節點的邊界。

我正在使用 D3.js 基於Curved Links基本模型繪制有向圖，並添加了“標記”箭頭，如另一個問題中所述。 我的可視化中的節點根據它們的屬性改變它們的大小和不透明度。 這引入了兩個問題：（1）當節點改變大小時，箭頭不指向節點的邊緣；（2）當節點部分透明時，邊緣的尾部通過節點出現。

對於第一個問題，有幾個可用的解決方案： 這個解決方案旨在正確偏移箭頭，但它不會影響鏈接末端的終端。 也有解決方案的建議， 在這里，但我沒有看到任何實際的完整的工作代碼存在。 這個 JS 小提琴具有我想要的箭頭外觀，但代碼相當不透明，而且不是模塊化的，我可以弄清楚如何將其應用於我自己的案例。

正如我所說，我的鏈接是基於 Curved Links 示例定義的：

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

由於我沒有得到任何回應，我繼續回答我自己的問題。 結果，我想出的答案可能不是最好的，因為我對這一切還是陌生的，但它有效並且與這個答案相似......非常適合處理彎曲鏈接和反射鏈接。

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

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 個單位. 因此，箭頭和鏈接尾部與節點邊界的偏移量不同，因此如果您不使用有向圖，則需要調整目標端的偏移量以匹配源端並使它們都正確地位於邊界上。

這是一個更新的 JSFiddle ，其中包括執行定向力布局所需的所有功能，其中包括：

• 具有透明度的 JSON 節點屬性的彩色圓圈
• 按 JSON 鏈接屬性為彎曲邊緣和箭頭着色
• 鏈接在節點邊界處開始和結束，因此它們不會與開始/結束節點重疊
• 匹配自反邊的樣式（即源和目標是同一個節點）
• 還支持更改邊緣厚度和透明度

您還需要為自己的應用程序調整其他一些內容。 例如，我向我的節點數據添加了一個radius變量，其中包括將屬性（當前為group ）正確縮放到圓半徑，然后對於圓它是.attr("r", function(d) { return d.radius;} . 我想不出一種方法來讓節點的圓的r用於力函數（我更喜歡，如果有人能弄清楚我會喜歡），所以這就是我的解決方法。

我認為這包含了許多可視化功能，我希望這些功能成為 D3 等工具的標准配置，但卻無法找到，而且實現起來有些困難。 但是現在已經完成了，我希望這會為其他一些人在 D3 中實現有向網絡節省大量時間。

Answer 2

這有一個非常簡單的解決方案。

1) 最后畫出你的節點。 這樣您的節點將位於 svg 的頂部，並將隱藏其中的任何鏈接部分。

2) 如果您要更新節點和鏈接，請遵循相同的模式，最后更新您的節點。