d3力导图绘制节点间多条关系平行线的方法
之前用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力导图绘制节点间多条关系平行线的方法的更多相关文章
- D3力布图绘制--节点间的多条关系连接线的方法（转）
在项目中遇到这样的场景,在使用D3.js绘制力布图的过程中,需要在2个节点间绘制多条连接线,找到一个不错的算法,在此分享下. 效果图: HTML中要连接 <!DOCTYPE html> & ...
- D3力布图绘制--节点自己连自己的实现
案例分析 先看下实现的效果图 实现方法 本篇是在之前写的博文 D3力布图绘制--节点间的多条关系连接线的方法 基础上加修改的,这里放上修改的代码,其他的一样 // DATA var nodes = [ ...
- D3力布图绘制--节点跑掉，单曲线弯曲问题记录
D3力布图绘制中遇到的交互问题,频繁操作数据后,会出现节点跑掉和单曲线弯曲的问题 问题描述 在id指向都正常的情况下出现以下2种状况: 单曲线弯曲 节点跑掉 经排查,是数据重复导致的问题 线条也是一样 ...
- D3力布图绘制--基本方法
本文主要结合案例记录使用D3.js绘制力布图的基本方法 样例显示 基本配置 this.force = d3.layout .force() .size([this.width, this.height ...
- D3力布图绘制--在曲线路径上添加文本标记
今天遇到一个在曲线路径上标识文本标记的问题,找到一个比较好的解决思路,在这里分享下: 使用d3建立的Force Layout,加上自定义的箭头形状,将多条连接线线改成弧线(https://www.cn ...
- JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)
利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...
- Vue和d3.js(v4)力导向图force结合使用，v3版本升级v4【一】
前段时间因为参与项目涉密,所以一直没有更新博客,有些博友给我私信或者留言要部分博文的源码,因为我的电脑更换,demo的源码没有备份 所以无法提供.大家可针对具体问题问我,有空我定会回复的.另外转发文章 ...
- d3力导向图聚焦
效果描述 双击节点,节点以及节点一度关联的节点保持高亮状态,其余节点变灰,半径变小,文字消失,并且向内收缩. 效果展示 正常状态 聚焦效果 关键代码 节点变化 激活节点保持高亮的样式,其余节点应用no ...
- Javascript 思维导图 绘制基础内容（值得一看）
来源于:http://www.cnblogs.com/coco1s/p/3953653.html javascript变量 javascript运算符 javascript数组 javascript流 ...
随机推荐
- C#LeetCode刷题之#532-数组中的K-diff数对（K-diff Pairs in an Array）
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3716 访问. 给定一个整数数组和一个整数 k, 你需要在数组里找 ...
- DB2数据库错误代码大全
SQLCode SQLState 状态说明 000 00000 SQL语句成功完成 01xxx XXX SQL语句成功完成,但是有警告 +012 01545 未限定的列名被解释为一个有相互关系的引用 ...
- 【HDU3038】How Many Answers Are Wrong - 带权并查集
描述 TT and FF are ... friends. Uh... very very good friends -________-b FF is a bad boy, he is always ...
- 如何去除List集合中的重复元素?
一.问题由来 在实际开发的时候,我们经常会碰到这么一个问题:一个集合容器里面有很多重复的对象,里面的对象没有主键,或者说忽略主键,根据业务的需求,我们需要根据条件筛选出没有重复的对象. 二.去重操作 ...
- 兼容ie9上传本地资源
在ie9中上传文件出现问题,大多数的上传文件都采用new Formdata创建添加文件,在IE9中不支持Formdata对象操作,ie10是支持的.所以只能使用表单提交的方式进行操作. <for ...
- 7.hbase shell命令 cmd
$HADOOP_USER_NAME #创建命名空间create_namespace 'bd1902' #展示所有命名空间 list_namespace #删除命名空间,The namespace mu ...
- Java实现树形结构的数据转Json格式
在项目中难免会用到树形结构,毕竟这是一种常用的组织架构.楼主这里整理了两个实现的版本,可以直接拿来使用,非常方便. 楼主没有单独建项目,直接在以前的一个Demo上实现的.第一种,看下面代码: pack ...
- 团队作业4：第五篇Scrum冲刺博客（歪瑞古德小队）
目录 一.Daily Scrum Meeting 1.1 会议照片 1.2 项目进展 二.项目燃尽图 三.签入记录 3.1 代码/文档签入记录 3.2 Code Review 记录 3.3 issue ...
- SPSSAU数据分析思维培养系列3：分析思路篇
本文章为SPSSAU数据分析思维培养的第3期文章. 上文讲解如何选择正确的分析方法,除了有正确的分析方法外,还需要把分析方法进行灵活运用.拿到一份数据,应该如何进行分析,总共有几个步骤,第一步第二步应 ...
- Java抽象类简述
Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...