html – 用d3绘制两个节点之间的多个边

我一直在跟踪Mike Bostock的代码，从 this example学习如何在d3中绘制有向图，并且想知道如何构造代码，以便我可以在图中的两个节点之间添加多个边。例如，如果上述示例中的数据集被定义为

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

然后运行代码，我看到的只有一行。所有的路径正在HTML代码正确绘制，但是它们都具有相同的坐标和方向，使视觉看起来像1行。在这个例子中需要做什么类型的代码重组，以允许3个边不能被绘制在彼此之上？

解决方法

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

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

dr = 75/d.linknum;

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

全面实施：http://jsfiddle.net/7HZcR/3/

原文地址：https://www.jb51.cc/html/233658.html