我一直在this example上学习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代码中正确绘制,但是它们都具有相同的坐标和方向,这导致视觉效果看起来像一条线。在这个例子中,需要进行什么样的代码重组,才能使3条边不相互重叠?
3条答案
按热度按时间rryofs0p1#
事实上,原始的可视化是一个显示节点之间多个链接的方法的主要示例,即使用弧而不是直接路径,因此您可以看到传入和传出链接。
这个概念可以扩展到通过改变表示链接的后续svg路径(弧)元素的半径值来显示这些类型的链接中的每一种的多个。一个基本的例子是
其中
d.linknum
表示连续链路的编号。dr
稍后被用作正被绘制的弧的rx和ry量。在此全面实施:http://jsfiddle.net/7HZcR/3/
beq87vna2#
下面是上面的答案,如果有人需要的话:
关于D3v4,请看这里:https://bl.ocks.org/mbostock/4600693
lnvxswe23#
感谢您使用linknum的答案,它真的工作。然而,线在Linkum > 10之后开始重叠。这里是一个函数来生成等距二次曲线