D3代表目標 - 源流的箭頭標記，與源 - 目標流相反

Question

我一直在爲我的項目使用多個D3示例。我剛剛添加了使用弧線在同一兩個節點之間進行多行（或多個鏈接）單獨顯示的功能。我得到了很大的幫助：http://jsfiddle.net/zhanghuancs/a2QpA/

然後我試圖通過標記屬性顯示方向性，但注意到我的箭頭顯示了我的節點之間的相反方向。例如，如果我有一個節點源A，目標節點B，箭頭將從B指向A，而不是A指向B.我創建了一個顯示我的問題的簡單jsfiddle。有人能告訴我我做錯了什麼嗎？

http://jsfiddle.net/RoshPlaha/5xj4159t/

var path = svg.append("svg:g") 
.selectAll("path") 
.data(force.links()) 
.enter().append("svg:path") 
.style("stroke", function(e) { return strokeLineColour(e)}) 
.attr("marker-end", "url(#arrow)"); 

    <marker id="arrow" viewbox="0 -5 10 10" refX="20" refY="0" markerWidth="10" markerHeight="10" orient="auto"> 
     <path d="M0,-5L10,0L0,5Z"> 
    </marker> 

我用以前與上文相同箭頭的功能，爲什麼方向已經翻轉，我不確定。

在此先感謝

Answer 1

您path的d的定義是錯誤的。你的定義

return "M" + d.source.x + "," + d.source.y + 
      "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
      "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y; 

弧回到源（最後一行）。所有你需要做的就是刪除最後一行。

return "M" + d.source.x + "," + d.source.y + 
      "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y; 

完整演示here。

Answer 2

你打勾的功能是不正確的：

，而不是這樣的：

// generate svg path 
      return "M" + d.source.x + "," + d.source.y + 
       "A" + dr + "," + dr + " 0 0 1," + d.target.x + "," + d.target.y + 
       "A" + dr + "," + dr + " 0 0 0," + d.source.x + "," + d.source.y;  
     }); 

試試這個：

// generate svg path 
      return "M" + d.target.x + "," + d.target.y + 
       "A" + dr + "," + dr + " 0 0 1," + d.source.x + "," + d.source.y + 
       "A" + dr + "," + dr + " 0 0 0," + d.target.x + "," + d.target.y;  
     }); 

的jsfiddle更新：http://jsfiddle.net/5xj4159t/2/