d3.js力导向图节点间多连接线对称绘制 _接线

本文基于d3.js中的力导向图对关系网络进行可视化。针对实体之间多关系亦即节点之间多条连接线的问题，采用弧形连接线，同时对节点间的多条连接线进行动态编号，并根据编号绘制不同半径的弧线，从而解决多条弧形连接线相互遮挡的问题。同时基于svg中的path标签属性，对弧形方向进行调整，保证多条连接线在节点之间的分布具有对称效果。
【d3.js力导向图节点间多连接线对称绘制】整体演示代码如下：
test4path.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;}

文章插图
最终效果如下（a、b节点之间6条连接线，四条a->b，两条b->a）：

文章插图
奇数条连接线效果（带有直线）：

文章插图

文章插图
说明：本文专注于实现多连接线和对称效果，其他可视化效果可自行修改设置。
参考资源：
1、