用 d3.js 做力导向图，如何使多条线并列显示不重叠

师***

想要实现的效果（节点之间有 3 条连线（直线），分别并列显示）：

【图 1】

现在实现的效果（节点之间有 3 条连线，重叠在一起）：

【图 2】

请问如何修改代码来实现【图 1】连线（直线）不重合的效果？

老***

设计思路：

对关系进行分组，指向两个相同节点为一组，记录下同组数据length，即两节点间关系线条数。

//关系分组
var linkGroup = {};
//对连接线进行统计和分组，不区分连接线的方向，只要属于同两个实体，即认为是同一组
var linkmap = {};
for(var i=0; i 0 ? d.source.y + d.sourceRadius:d.source.y - d.sourceRadius;
  y2 = d.target.y - d.source.y > 0 ? d.target.y - d.targetRadius:d.target.y + d.targetRadius;
}
  if(d.linknum==0){//设置编号为0的连接线为直线，其他连接线会均分在两边
d.x_start = x1;
d.y_start = y1;
d.x_end = x2;
d.y_end = y2;
return 'M'+x1+' '+y1+' L '+ x2 +' '+y2;
  }
  var a = d.sourceRadius > d.targetRadius ? d.targetRadius*d.linknum/6 : d.sourceRadius*d.linknum/6;
  var xm =d.target.x - d.source.x > 0 ? d.source.x + Math.sqrt((d.sourceRadius*d.sourceRadius-a*a)/(1+tan*tan)):
d.source.x - Math.sqrt((d.sourceRadius*d.sourceRadius-a*a)/(1+tan*tan));
  var ym =d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt((d.sourceRadius*d.sourceRadius-a*a)*tan*tan/(1+tan*tan)):
d.source.y - Math.sqrt((d.sourceRadius*d.sourceRadius-a*a)*tan*tan/(1+tan*tan));
  var xn =d.target.x - d.source.x > 0 ? d.target.x - Math.sqrt((d.targetRadius*d.targetRadius-a*a)/(1+tan*tan)):
d.target.x + Math.sqrt((d.targetRadius*d.targetRadius-a*a)/(1+tan*tan));
  var yn =d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt((d.targetRadius*d.targetRadius-a*a)*tan*tan/(1+tan*tan)):
d.target.y + Math.sqrt((d.targetRadius*d.targetRadius-a*a)*tan*tan/(1+tan*tan));
  if(d.target.x - d.source.x == 0 || tan == 0){//斜率无穷大或为0时
ym = d.target.y - d.source.y > 0 ? d.source.y + Math.sqrt(d.sourceRadius*d.sourceRadius-a*a):d.source.y - Math.sqrt(d.sourceRadius*d.sourceRadius-a*a);
yn = d.target.y - d.source.y > 0 ? d.target.y - Math.sqrt(d.targetRadius*d.targetRadius-a*a):d.target.y + Math.sqrt(d.targetRadius*d.targetRadius-a*a);
  }

  var k = (x1-x2)/(y2-y1);//连线垂线的斜率
  var dx = Math.sqrt(a*a/(1+k*k)); //相对垂点x轴距离
var dy = Math.sqrt(a*a*k*k/(1+k*k)); //相对垂点y轴距离
if((y2-y1) == 0){
dx = 0;
dy = Math.sqrt(a*a);
}
  if(a > 0){
var xs = k > 0 ? xm - dx : xm + dx;
var ys = ym - dy;
var xt = k > 0 ? xn - dx : xn + dx;
var yt = yn - dy;
  }else{
var xs = k > 0 ? xm + dx : xm - dx;
var ys = ym + dy;
var xt = k > 0 ? xn + dx : xn - dx;
var yt = yn + dy;
  }
  //记录连线起始和终止坐标，用于定位线上文字
  d.x_start = x1;
d.y_start = y1;
d.x_end = x2;
d.y_end = y2;
  return 'M'+xs+' '+ys+' L '+ xt +' '+yt;
  });
最后想知道作者大大，连线上写字是如何实现的，挺急的！！！

本***

补充回复图片

已有账号？

找人解决需求

用 d3.js 做力导向图，如何使多条线并列显示不重叠

全部参与2

热门问答

师***

今日需求悬赏

今日问答求助

发布任务需求已有1031168位用户正在使用天盟网服务

新手帮助

平台规则

关于天盟

一键快捷导航

微信公众号

手机客户端