我一直在关注 Mike Bostock 的代码这个例子 http://bl.ocks.org/1153292学习如何在 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 个边不被绘制在彼此之上？
事实上，原始可视化是显示节点之间多个链接的一种方法的主要示例，即使用弧而不是直接路径，因此您可以看到传入和传出链接。
通过更改后续的半径值，可以扩展此概念以显示每种类型的链接的多个svg路径（圆弧） http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands代表链接的元素。一个基本的例子是
dr = 75/d.linknum;
Where d.linknum表示连续链接的编号。dr稍后用作正在绘制的弧的 rx 和 ry 量。
完整的实现在这里：http://jsfiddle.net/7HZcR/3/ http://jsfiddle.net/7HZcR/3/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
