使用d3在两个节点之间绘制多个边

Question

我一直在关注来自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代码中正确绘制，但它们都具有相同的坐标和方向，使视觉看起来像1行。在这个例子中需要进行什么样的代码重组才能使3个边缘不能相互叠加？

Answer 1

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

通过更改表示链接的后续svg path(arc)元素的半径值，可以扩展此概念以显示每种类型链接的多个。

的一个基本例子

dr = 75/d.linknum;

其中d.linknum表示连续链接的编号。 dr稍后用作绘制弧的rx和ry量。

在此全面实施：http://jsfiddle.net/7HZcR/3/

Answer 2

如果有人需要，以上是上述答案的来源：

＆＃13;

＆＃13;

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

marker#licensing {
  fill: green;
}

path.link.licensing {
  stroke: green;
}

path.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chart"></div>

＆＃13;

<owl:Class rdf:ID=”product”>
    <rdfs:comment>Products form a class. </rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Camera”>
    <rdfs:comment>Photography device</rdfs:comment>
    <rdfs:label>Device</rdfs:label>
    <rdfs:subClassOf rdf:resource=”#product”/>
</owl:Class>

<owl:Class rdf:ID=”Canon Product”>
    <rdfs:comment>A canon device</rdfs:comment>
    <rdfs:label>Device</rdfs:label>
    <rdfs:subClassOf rdf:resource=”#product”/>
</owl:Class>

＆＃13;

＆＃13;

＆＃13;

对于D3v4，请参见此处：https://bl.ocks.org/mbostock/4600693