Javascript D3表示目标-源流的箭头标记，与源-目标流相反

我一直在为我的项目使用多个D3示例。我刚刚添加了一个功能，即使用圆弧分别显示同两个节点之间的多条直线（或链接）。我得到了以下方面的巨大帮助：

然后，我尝试通过marker属性显示方向性，但注意到我的箭头在节点之间显示相反的方向。例如，如果我有一个节点源a，目标是节点B，箭头将从B指向a，而不是从a指向B。我创建了一个简单的JSFIDLE来显示我的问题。有人能告诉我我做错了什么吗

var path=svg.append（“svg:g”）
.selectAll（“路径”）
.data（force.links（））
.enter（）.append（“svg:path”）
.style（“笔划”，函数（e）{return strokelinecolor（e）}）
.attr（“标记结束”、“url（#箭头）”）；

我以前使用过上述相同的箭头功能，所以我不确定为什么方向被翻转

---

提前感谢

您的

路径

的

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;

---

完成演示。

您的勾号功能不正确：

与此相反：

// 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;    
        });

---

jshiddle更新：

不用担心，我一回答就注意到拉尔斯比我先到了那里。至少你已经让它工作了：））

// 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;    
        });