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

Question

我一直在关注来自 this example 的 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 代码中正确绘制，但是它们都具有相同的坐标和方向，这导致视觉效果看起来像 1 条线。在此示例中需要进行什么样的代码重组才能使 3 条边不绘制在彼此之上？

Answer 1

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

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

dr = 75/d.linknum;

其中d.linknum表示连续链接的编号。 dr 稍后用作绘制弧的 rx 和 ry 量。

此处完整实现:http://jsfiddle.net/7HZcR/3/