html – 用d3绘制两个节点之间的多个边
发布时间：2020-12-14 22:26:22 所属栏目：资源 来源：网络整理
导读：我一直在跟踪Mike Bostock的代码，从 this example学习如何在d3中绘制有向图，并且想知道如何构造代码，以便我可以在图中的两个节点之间添加多个边。例如，如果上述示例中的数据集被定义为 var links = [{source: "Microsoft",target: "Amazon",type: "licen
|
我一直在跟踪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/ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |