我一直在按照 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 条边不被绘制在彼此之上?
原文由 Josh Bradley 发布,翻译遵循 CC BY-SA 4.0 许可协议
事实上,原始可视化是一种显示节点之间多个链接的方法的主要示例,即使用弧线而不是直接路径,因此您可以看到传入和传出链接。
通过更改表示链接的后续 svg path(arc) 元素的半径值,可以扩展此概念以显示每种类型链接的多个。一个基本的例子是
其中
d.linknum
表示连续链接的编号。dr
稍后用作正在绘制的弧的 rx 和 ry 量。完整实施在这里:http: //jsfiddle.net/7HZcR/3/