D3.js-绘制力布图节点间的多条关系连接线的方法（转）

最新推荐文章于 2024-07-18 11:18:19 发布

weixin_30237281

最新推荐文章于 2024-07-18 11:18:19 发布

阅读量1.7k

点赞数

原文链接：http://www.cnblogs.com/webhmy/p/10906268.html

版权

本文介绍如何在D3.js的力导向图中实现节点间的多条连接线效果，通过分享的实际案例和代码，帮助读者理解和应用这一算法。

摘要由CSDN通过智能技术生成

在项目中遇到这样的场景，在使用D3.js绘制力布图的过程中，需要在2个节点间绘制多条连接线，找到一个不错的算法，在此分享下。
效果图：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <script>
    var nodes = [{}, {}, {}, {}, {}, {}];
    var links = [      
        // one link
        { source: 0, target: 1 },
      
        // two links
        { source: 2, target: 1 }, 
        { source: 1, target: 2 },
      
        //three links
        { source: 3, target: 2 }, 
        { source: 2, t