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

前端之家收集整理的这篇文章主要介绍了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/

猜你在找的HTML相关文章