Php 如何在D3.js强制有向图中显示按值分隔的多个链接 它是重叠的线条

我尝试通过多数组（源、目标、值）显示节点之间的许多链接 但它不是显示，而是重叠的线条

[我的例子]

请参见knet2.json中的

{
"nodes":[
 {
"name":"Novak_Djokovic",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Flickr_-_Carine06_-_Novak_Djokovic_(4).jpg?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/Novak_Djokovic",
"group":1},
{
"name":"Rafael_Nadal",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Rafael_Nadal_January_2015.jpg?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/Rafael_Nadal",
"group":1},
{
"name":"Grand_Slam_(tennis)",
"thumbnail":null,
"uri":"http:\/\/dbpedia.org\/resource\/Grand_Slam_(tennis)",
"group":1},
{
"name":"Toni_Nadal",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Toni_Nadal.jpg?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/Toni_Nadal",
"group":0},
{
"name":"Australian_Open",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Australian_Open_2007_Night_Session.JPG?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/Australian_Open",
"group":0},
{
"name":"Tennis_at_the_2008_Summer_Olympics_\u2013_Men's_singles",
"thumbnail":"",
"uri":"http:\/\/dbpedia.org\/resource\/Tennis_at_the_2008_Summer_Olympics_%E2%80%93_Men's_singles",
"group":0},
{
"name":"The_Championships,_Wimbledon",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/Spencer_gore.jpg?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/The_Championships,_Wimbledon",
"group":0},
{
"name":"Big_Four_(tennis)",
"thumbnail":"http:\/\/commons.wikimedia.org\/wiki\/Special:FilePath\/R_federer.jpg?width=300",
"uri":"http:\/\/dbpedia.org\/resource\/Big_Four_(tennis)",
"group":0}
],
"links":[
 {"source":1,"target":3,"prop":"coach","value":"coach"},
{"source":4,"target":2,"prop":"title","value":"title"},
{"source":4,"target":0,"prop":"menCurrent","value":"menCurrent"},
{"source":3,"target":1,"prop":"coachplayers","value":"coachplayers"},
{"source":5,"target":0,"prop":"bronze","value":"bronze"},
{"source":5,"target":1,"prop":"gold","value":"gold"},
{"source":5,"target":1,"prop":"goldMedalist","value":"goldMedalist"},
{"source":5,"target":0,"prop":"bronzeMedalist","value":"bronzeMedalist"},
{"source":6,"target":0,"prop":"menCurrent","value":"menCurrent"},
{"source":6,"target":2,"prop":"title","value":"title"},
{"source":7,"target":0,"prop":"caption","value":"caption"},
{"source":7,"target":1,"prop":"caption","value":"caption"},
{"source":3,"target":2,"prop":"coachtournamentrecord","value":"coachtournamentrecord"}
]
}

下面是一些关系

 {"source":5,"target":1,"prop":"gold","value":"gold"},
 {"source":5,"target":1,"prop":"goldMedalist","value":"goldMedalist"},

我的例子没有说明两者之间的关系。它有重叠的线条。 请告诉我原因。

线重叠是因为连接相同节点的链接具有相同的端点和起点，因此需要某种方法来区分它们。这有点老套，但它所做的是查看链接，并在.multilikindex-->中为具有相同节点的链接提供不同索引

然后，在绘制链接时，我们使用此信息在节点之间绘制不同半径的圆弧。我认为，确切的公式需要修改，但你可以在小提琴中看到链接是单独解决的。-->

真正令人讨厌的是使用链接元素（存储在domLinks中）来计算链接文本元素在弯曲链接中间的位置，而不是节点之间的中间位置，因为这些元素仍然会相互覆盖。使用从中调整的一些代码

---

你到底想做什么？我想显示节点之间的所有行（链接）和行（d.value）上的链接文本。现在它是显示，但它的重叠线。谢谢你的评论。非常感谢你的回答。现在我试着根据你们的答案来做，但它仍然是重叠的，以防图中有2个以上的链接。例3这种关系。{“source”：5，“target”：1，“prop”：“gold”，“value”：“gold”}，{“source”：5，“target”：1，“prop”：“TestRalation3”，“value”：“TestRalation3”，“value”：“TestRalation3”}，{“source”：5，“target”：1，“prop”：“goldmedallest”，“value”：“goldmedallest”}，您可以稍微玩玩一下dr公式，例如

dr=（Math.sqrt（dx*dx+dy*dy）*2）*（1.0/（d.multilikindex+1））-但最终您可能需要更明确地设置链接路径-可能是从直线延伸出d.multiLinkIndex*10像素的bezier曲线，以提供一个设置的分隔。非常感谢您提供了一个好的答案。我试着根据你的答案改变dr公式，最后它不会重叠。多谢各位。
var mlink = d3.map();
graph.links.forEach (function(link) {
    var key = link.source+"-"+link.target;
    var i = mlink.has(key) ? mlink.get(key) + 1 : 0;
    mlink.set (key, i);
    link.multiLinkIndex = i;
});

var domLinks = [];
    link.attr("d", function(d,i) {
     domLinks[i] = this;
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy) / (d.multiLinkIndex + 1) ;
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
    });

linkText
    /*
    .attr("x", function(d) {
        return ((d.source.x + d.target.x)/2);
    })
    .attr("y", function(d) {
        return ((d.source.y + d.target.y)/2);
    })
    */
    .attr("transform", function(d,i) {
            var domLink = domLinks[i];
         var l = domLink.getTotalLength();
         var p = domLink.getPointAtLength(l/2);
         return ("translate ("+p.x+","+p.y+")");
    })
    ;