之前用d3做了多条线之间的绘图是曲线表示的，现在产品要求改成平行线的样式，经过在网上的调研和自己的尝试，实践出一个可用的方法，分享给大家，先展示下结果：

事先声明，本方法是在以下参考网站上进行的结合和更改：

d3力导图节点间多条线的绘图方法

d3.js Force Layout: drawing multiple straight, parallel links between two nodes

force layout with multiple links between nodes

如果图示的样式是你想要的，那么直接粘贴代码看吧！代码可直接运行。



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

  <style>

    body {

      margin: 0;

      position: fixed;

      top: 0;

      right: 0;

      bottom: 0;

      left: 0;

    }

    path {

      fill: none;

      stroke-width: 3;

    }

    circle {

      stroke: white;

      stroke-width: 2;

    }

  </style>

</head>

<body>

  <script>

    // DATA

    var nodes = [{}, {}];

    var links = [

      // links 可更改，自己改数量显示不同的条数

      { source: 0, target: 1 },

      { source: 0, target: 1 },

      { source: 0, target: 1 },

      { source: 0, target: 1 },

      { source: 0, target: 1 }

    ];

    _.each(links, function (link) {

      var same = _.filter(links, {

        source: link.source,

        target: link.target

      });

      var sameAlt = _.filter(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);

      });

    });

    var maxSame = _.chain(links)

      .sortBy(function (x) {

        return x.sameTotal;

      })

      .last()

      .value().sameTotal;

    _.each(links, function (link) {

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

    });

    // FORCE

    var width = 960,

      height = 500;

    var force = d3.layout.force()

      .nodes(nodes)

      .links(links)

      .size([width, height])

      .linkDistance(400)

      .charge(-2000)

      .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", 30)

      .call(force.drag);

    // TICK

    function tick(d) {

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

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

      });

      path.attr("d", linkArc);

    }

    function calcTranslationExact(targetDistance, source, target) {

      var x1_x0 = target.x - source.x,

        y1_y0 = target.y - source.y,

        x2_x0, y2_y0;

      if (y1_y0 === 0) {

        x2_x0 = 0;

        y2_y0 = targetDistance;

      } else {

        let angle = Math.atan((x1_x0) / (y1_y0));

        x2_x0 = -targetDistance * Math.cos(angle);

        y2_y0 = targetDistance * Math.sin(angle);

      }

      return {

        dx: x2_x0,

        dy: y2_y0

      };

    }

    // some more info: http://stackoverflow.com/questions/11368339/drawing-multiple-edges-between-two-nodes-with-d3

    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),

        arc = 0;

      // 上下不一样的间隔

      let dis1 = calcTranslationExact(d.sameIndex * 12, d.source, d.target)

      let dis2 = calcTranslationExact(-(d.sameIndex - Math.ceil(d.sameTotalHalf)) * 12, d.source, d.target)

      let dx1 = dis1.dx;

      let dy1 = dis1.dy

      let dx2 = dis2.dx;

      let dy2 = dis2.dy

      // 表示奇数的时候，中间的那条

      if (Math.ceil(d.sameTotalHalf) === d.sameIndex && d.sameUneven === true) {

        dx1 = 0;

        dx2 = 0;

        dy1 = 0;

        dy2 = 0;

      }

      if (d.sameArcDirection === 0) {

        return "M" + (d.source.x + dx1) + "," + (d.source.y + dy1) + "A" + arc + "," + arc + " 0 0," + 0 + " " + (d.target.x + dx1) + "," + (d.target.y + dy1);

      } else {

        return "M" + (d.source.x + dx2) + "," + (d.source.y + dy2) + "A" + arc + "," + arc + " 0 0," + 0 + " " + (d.target.x + dx2) + "," + (d.target.y + dy2);

      }

    }

  </script>

</body>

d3力导图绘制节点间多条关系平行线的方法的更多相关文章

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

    在项目中遇到这样的场景,在使用D3.js绘制力布图的过程中,需要在2个节点间绘制多条连接线,找到一个不错的算法,在此分享下. 效果图: HTML中要连接 <!DOCTYPE html> & ...

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

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

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

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

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

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

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

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

  6. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

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

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

  8. d3力导向图聚焦

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

  9. Javascript 思维导图 绘制基础内容（值得一看）

    来源于:http://www.cnblogs.com/coco1s/p/3953653.html javascript变量 javascript运算符 javascript数组 javascript流 ...

随机推荐

  1. 使用pytorchviz进行模型可视化出现 'NoneType' object has no attribute 'grad_fn'

    问题 最近学习pytorch, 原来用kreas重现的模型改为用pytorch实现训练,因为这样给模型的操作更加细致, 对模型的掌控更好. 当我写好一个模型 出现了这个问题 使用pytorchviz进 ...

  2. Who Am I? Personality Detection based on Deep Learning for Texts 阅读笔记

    文章目录 源代码github地址 摘要 2CLSTM 过程 1. 词嵌入 2. 2LSTM处理 3. CNN学习LSGCNN学习LSG 4. Softmax分类 源代码github地址 https:/ ...

  3. cocos2dx重新设置 SDK NDK目录

    参考博客https://blog.csdn.net/yinhe888675/article/details/41042347 初始设置SDK,NDK目录后,当我想换目录的时候不知道该怎么办,怎么重新设 ...

  4. angular中常用内置过滤器

    <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta ...

  5. 用ps实现提高照片的清晰度

    首先通过ctrl+j 拷贝一份 然后选择滤镜-->其他-->高反差包留 选择叠加,就可以达到效果了,实在不行,多弄几层图层

  6. ESLint 使用简介

    C 语言诞生之初,程序员编写的代码风格各异,在移植时会出现一些因为不严谨的代码段导致无法被编译器执行的问题.于是在 1979 年,一款叫 lint[1] 的程序被开发出来,能够通过扫描源代码检测潜在的 ...

  7. python利用爬虫获取百度翻译，爱词霸翻译结果，制作翻译小工具

    先看效果展示(仅作学习使用,非商业) 效果图是采用的 爱词霸 翻译,百度翻译 也实现了,只不过被注释了. 学计算机很多时候碰到生词,每次打开手机/浏览器翻译总觉得很麻烦,就想着自己写一个软件,自己去实 ...

  8. 在不影响程序使用的情况下添加shellcode

    参考 在文章Backdooring PE Files with Shellcode中介绍了一种在正常程序中注入shellcode的方式,让程序以前的逻辑照常能够正常运行,下面复现一下并解决几个小问题. ...

  9. latex:公式的序号

    1.排序单位 在文类book或report中,行间公式是以章为排序单位的,即每一新章节开始,公式序号计数器equation就被清零.比如第1章第3个公式的序号是(1.3),第2章第1个公式的序号是(2 ...

  10. 怎么给Ubuntu Server安装GUI桌面

    sudo apt update sudo apt upgrade sudo add-apt-repository universe sudo add-apt-repository multiverse ...