用d3绘制两个节点之间的多个边 [英] Drawing multiple edges between two nodes with d3

问题描述

我一直关注来自此示例的Mike Bostock的代码，以了解如何在d3中绘制有向图并且想知道我将如何构建代码，以便我可以在图中的两个节点之间添加多个边。例如，如果上面示例中的数据集定义为

I've been following Mike Bostock's code from this example to learn how to draw directed graphs in d3 and was wondering how I would structure the code so that I could add multiple edges between two nodes in the graph. For example, if the dataset in the example above were defined as

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条边不能相互绘制？

and then run through the code, all I see is one line. All the paths are being drawn correctly in the html code, however they all have the same coordinates and orientation which causes the visual to look like 1 line. What kind of code restructuring would need to be done in this example to allow for the 3 edges to not be drawn on top of each other?

推荐答案

事实上，原始可视化是一种显示节点之间多个链接的方法的主要示例，即使用弧而不是直接路径，因此您可以看到入站和出站链接。

In fact, the original visualization is a prime example of one method to show multiple links between nodes, that is - using arcs rather than direct paths, so you can see both incoming and outgoing links.

此概念可以扩展为通过更改后续 svg path（arc）表示链接的元素。一个基本的例子是

This concept can be extended to show multiple of each of these types of links by changing the radius values of subsequent svg path(arc) elements representing the link. A basic example being

dr = 75/d.linknum;

其中 d.linknum 连续链接。 dr 稍后用作绘制弧线的rx和ry金额。

Where d.linknum represents the number of the successive link. dr is later used as the rx and ry amounts for the arc being drawn.

完全实现： http://jsfiddle.net/7HZcR/3/

>

这篇关于用d3绘制两个节点之间的多个边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！