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

效果图：

HTML中要连接

<!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>

</body>


    // 下面是JS部分的代码，使用前请连接`https://d3js.org/d3.v3.min.js` 和 `https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js`

    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, target: 3 },

        { source: 2, target: 3 },

        // four links

        { source: 3, target: 4 },

        { source: 3, target: 4 },

        { source: 3, target: 4 },

      	{ source: 3, target: 4 },

        // five links

        { source: 4, target: 5 },

        { source: 4, target: 5 },

        { source: 4, target: 5 },

        { source: 4, target: 5 },

        { source: 4, target: 5 }

    ];

    // DATA FORMATTING

    _.each(links, function(link) {

        var same = _.where(links, {

            'source': link.source,

            'target': link.target

        });

        var sameAlt = _.where(links, {

            'source': link.target,

            'target': link.source

        });

        var sameAll = same.concat(sameAlt);

        _.each(sameAll, function(s, i) {

            s.sameIndex = (i + 1);

            s.sameTotal = sameAll.length;

            s.sameTotalHalf = (s.sameTotal / 2);

            s.sameUneven = ((s.sameTotal % 2) !== 0);

            s.sameMiddleLink = ((s.sameUneven === true) && (Math.ceil(s.sameTotalHalf) === s.sameIndex));

            s.sameLowerHalf = (s.sameIndex <= s.sameTotalHalf);

            s.sameArcDirection = s.sameLowerHalf ? 0 : 1;

            s.sameIndexCorrected = s.sameLowerHalf ? s.sameIndex : (s.sameIndex - Math.ceil(s.sameTotalHalf));

        });

        let sameStandard = sameAll[0];

        let sourceStandard = sameStandard.source;

        let targetStandard = sameStandard.target;

        _.each(sameAll,function(s,i){

          if(s.source === targetStandard && s.target === sourceStandard && s.sameTotal > 1){

            s.sameArcDirection = s.sameArcDirection === 0 ? 1 : 0

          }

        })

    });  

    var maxSame = _.chain(links)

        .sortBy(function(x) {

            return x.sameTotal;

        })

        .last()

        .value().sameTotal;

    _.each(links, function(link) {

        link.maxSameHalf = Math.floor(maxSame / 2);

    });    

    var width = 960,

        height = 500;

    var force = d3.layout.force()

        .nodes(nodes)

        .links(links)

        .size([width, height])

        .linkDistance(100)

        .charge(-200)

        .on('tick', tick)

        .start();

    var svg = d3.select("body").append("svg")

        .attr("width", width)

        .attr("height", height);

    var path = svg.append("g").selectAll("path")

        .data(force.links())

        .enter().append("path")

        .style("stroke", function(d) {

            return d3.scale.category20().range()[d.sameIndex - 1];

        });

    var circle = svg.append("g").selectAll("circle")

        .data(force.nodes())

        .enter().append("circle")

        .attr("r", 8)

        .call(force.drag);

    function tick(d) {

        circle.attr("transform", function(d) {

            return "translate(" + d.x + "," + d.y + ")";

        });

        path.attr("d", linkArc);

    }

    function linkArc(d) {

        var dx = (d.target.x - d.source.x),

            dy = (d.target.y - d.source.y),

            dr = Math.sqrt(dx * dx + dy * dy),

            unevenCorrection = (d.sameUneven ? 0 : 0.5),

            arc = ((dr * d.maxSameHalf) / (d.sameIndexCorrected - unevenCorrection));

        if (d.sameMiddleLink) {

            arc = 0;

        }

        return "M" + d.source.x + "," + d.source.y + "A" + arc + "," + arc + " 0 0," + d.sameArcDirection + " " + d.target.x + "," + d.target.y;

    }

本文转自： http://bl.ocks.org/thomasdobber/9b78824119136778052f64a967c070e0

D3力布图绘制--节点间的多条关系连接线的方法（转）的更多相关文章

  1. D3力布图绘制--节点自己连自己的实现

    案例分析 先看下实现的效果图 实现方法 本篇是在之前写的博文 D3力布图绘制--节点间的多条关系连接线的方法 基础上加修改的,这里放上修改的代码,其他的一样 // DATA var nodes = [ ...

  2. D3力布图绘制--节点跑掉，单曲线弯曲问题记录

    D3力布图绘制中遇到的交互问题,频繁操作数据后,会出现节点跑掉和单曲线弯曲的问题 问题描述 在id指向都正常的情况下出现以下2种状况: 单曲线弯曲 节点跑掉 经排查,是数据重复导致的问题 线条也是一样 ...

  3. d3力导图绘制节点间多条关系平行线的方法

    之前用d3做了多条线之间的绘图是曲线表示的,现在产品要求改成平行线的样式,经过在网上的调研和自己的尝试,实践出一个可用的方法,分享给大家,先展示下结果: 事先声明,本方法是在以下参考网站上进行的结合和 ...

  4. D3力布图绘制--基本方法

    本文主要结合案例记录使用D3.js绘制力布图的基本方法 样例显示 基本配置 this.force = d3.layout .force() .size([this.width, this.height ...

  5. D3力布图绘制--在曲线路径上添加文本标记

    今天遇到一个在曲线路径上标识文本标记的问题,找到一个比较好的解决思路,在这里分享下: 使用d3建立的Force Layout,加上自定义的箭头形状,将多条连接线线改成弧线(https://www.cn ...

  6. d3力导向图聚焦

    效果描述 双击节点,节点以及节点一度关联的节点保持高亮状态,其余节点变灰,半径变小,文字消失,并且向内收缩. 效果展示 正常状态 聚焦效果 关键代码 节点变化 激活节点保持高亮的样式,其余节点应用no ...

  7. Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】

    前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...

  8. 使用百度Echarts制作力导向图

    最近项目需求制作一个力导向图来展示企业的画像等关系信息,故想到了百度Echarts的关系图,在这使用Echarts3.0版本来实现.先上效果图,再看代吗 哎,本来想整个工程扔出来,发现好像没地方上传附 ...

  9. D3.js力导向图中新增节点及新增关系连线示例

    大家在使用D3.js中的力导向图时,基本都会遇到动态增加节点及连线的需求,这里记录一下我的实现方式. 话不多说,先放代码: <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Linux 部署 nginx

    nginx搭建 1. 清除之前nginx环境 #查看nginx进程 ps -ef|grep nginx #找到nginx相对应的位置 whereis nginx #停止nginx服务 /usr/loc ...

  2. 前端优化，包括css,jss,img,cookie

    前端优化,来自某懒观看麦子学院视频的笔记. 尽可能减少HTTP的请求数 使用CDN 添加Expirs头,或者Cache-control Gzip组件压缩文件内容 将CSS放在页面上方 将脚本放到页面下 ...

  3. IT兄弟连 Java语法教程 流程控制语句 分支结构语句4

    4  嵌套if-else条件语句 嵌套if语句是作为另一个if或else语句的目标的if语句.嵌套if语句在程序设计中非常普遍.Java中,关于嵌套if语句需要记住的是,else语句总是和同一代码块中 ...

  4. Flink1.7.2安装部署的几种方式

    原文链接:https://blog.csdn.net/a_drjiaoda/article/details/88037282 前言:Flink的运行一般分为三种模式,即local.Standalone ...

  5. 解决邮件发送错误：503 Error: need EHLO and AUTH first

    引用文章 https://blog.csdn.net/lingfeian/article/details/96731620 问题描述 2019-07-21 16:14:00.449 ERROR 966 ...

  6. jQuery 源码分析(十七) 事件系统模块 实例方法和便捷方法 详解

    实例方法和便捷方法是指jQuery可以直接通过链接操作的方法,是通过调用$.event上的方法(上一节介绍的底层方法)来实现的,常用的如下: on(types,selector,data,fn,one ...

  7. Java开发桌面程序学习（12）——Javafx 悬浮窗提示 tooptip

    Javafx 悬浮窗提示 tooptip 鼠标悬浮在某个控件,弹出提示,效果如下: 代码: //control是某个控件 Tooltip.install(control, new Tooltip(&q ...

  8. django5-书籍与出版社关联外键

    1.外键相关 一对多的概念 ,这里是一个出版社对应本书籍 ! 设计表使用model models.ForeignKey('关联一', on_delete=models.CASCADE) #给多设置外键 ...

  9. 微信跳转外部浏览器下载app原理

    在我们使用微信营销的时候,很容易碰到推广连接在微信内无法打开或无法下载app的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢,主要有以下三点 1.网页链接被举 ...

  10. Vue实战狗尾草博客后台管理系统第三章

    Vue实现狗尾草博客后台管理系统第三章 本章节,咱们开发管理系统侧边栏及面包屑功能. 先上一张效果图 样式呢,作者前端初审,关于设计上毫无美感可言,大家可根据自己情况设计更好看的哦~ 侧边栏 这里我们 ...