Html 使用d3在两个节点之间绘制多条边

我一直在遵循Mike Bostock的代码，学习如何在d3中绘制有向图，并想知道如何构造代码，以便在图中的两个节点之间添加多条边。例如，如果上面示例中的数据集定义为

var links = [{source: "Microsoft", target: "Amazon", type: "licensing"},
             {source: "Microsoft", target: "Amazon", type: "suit"},
             {source: "Samsung", target: "Apple", type: "suit"},
             {source: "Microsoft", target: "Amazon", type: "resolved"}];

---

然后运行代码，我只看到一行。所有路径都在html代码中正确绘制，但是它们都具有相同的坐标和方向，这使得视觉效果看起来像一条线。在本例中，需要进行什么样的代码重组才能使3条边不相互重叠？

事实上，原始可视化是显示节点之间多个链接的一种方法的主要示例，即使用圆弧而不是直接路径，这样您可以同时看到传入和传出链接

通过更改表示链接的后续元素的半径值，可以扩展此概念以显示每种类型的链接中的多个。一个基本的例子是

dr = 75/d.linknum;

其中

d.linknum

表示连续链接的编号

dr

稍后用作所绘制电弧的rx和ry量

在此全面实施：

---

如果有人需要以上答案，这里是答案的来源：

var links=[{source:“Microsoft”，target:“Amazon”，type:“licensing”}，
{来源：“微软”，目标：“亚马逊”，键入：“西服”}，
{来源：“三星”，目标：“苹果”，类型：“西装”}，
{来源：“微软”，目标：“亚马逊”，键入：“已解决”}；
//按源排序链接，然后按目标排序
links.sort（函数（a，b）{
如果（a.source>b.source）{return 1；}
else如果（a.sourceb.target）{返回1；}
如果（a.target对于（var i=0；iThanks！我正在研究一个涉及二次贝塞尔曲线的解决方案，并使用Math.random（）确定反射/控制点的精确x和y坐标。您的解决方案更加优雅。这很好！但如果JSFIDLE出现故障，在此处发布源代码可能会有所帮助。此外，源代码中有注释可以更好地解释答案，例如
任何具有重复源代码和目标的链接都会得到增量'linknum'
我不熟悉d3.js，我用它来显示图形&这个答案有助于显示节点之间的多条边。我面临的问题是链接的文本重叠。我必须使用什么样式，或者d3提供什么解决方案？这是一个好答案，但并不完美。看看这个编辑过的版本：，如果我需要的话单击顶部的按钮，它将修复所有节点，完成此操作后，拖动节点。您将注意到路径重叠：（恼人的是，否则它工作得很好）我复制了路径功能代码（导致
返回“M”+d.source.x+，“+d.source.y+”A+dr
。）进入我正在处理的页面，但所有路径都显示为相同的半圆。如果发生这种情况，则最大半径（dr=75/d.linknum；

中的

75

）太低，应该增加。do 75*linknum@IanThat也可以，但从更圆的弧开始，在中工作。@Ian不知道你是否找到了答案，但看看这个问题的答案。我最初的评论包含了问题和我找到的解决方案。