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

本文基于d3.js中的力导向图对关系网络进行可视化。针对实体之间多关系亦即节点之间多条连接线的问题,采用弧形连接线,同时对节点间的多条连接线进行动态编号,并根据编号绘制不同半径的弧线,从而解决多条弧形连接线相互遮挡的问题。同时基于svg中的path标签属性,对弧形方向进行调整,保证多条连接线在节点之间的分布具有对称效果。

整体演示代码如下:




    
    test4
    


最终效果如下(a、b节点之间6条连接线,四条a->b,两条b->a):

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

奇数条连接线效果(带有直线):

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

说明:本文专注于实现多连接线和对称效果,其他可视化效果可自行修改设置。

参考资源:

1、https://stackoverflow.com/questions/37417459/drawing-multiple-links-between-fixed-nodes

你可能感兴趣的:(前端开发)