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/

相关文章

vue阻止冒泡事件 阻止点击事件的执行 <div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些