代码原文
关系图
<!DOCTYPE html>
<html>
<head>
<title>实验6-成员关系图</title>
<meta charset = "utf-8">
<script src = "echarts.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="main" style="width:1200px;height:800px;"></div>
<script>
/*********************************************************
* csvdata = [time:string, proto: string,sip: string,
* sport: string, dip: string, dport: string,
* from: string, to: string, subject: string]
* *******************************************************/
//读取csv文件,准备数据集,绘制关系图
d3.csv("email_dev_inside.csv",function(error,csvdata){
if(error){
//数据读取失败,控制台输出失败原因
console.log(error);
}else{
//数据读取成功时执行
var data = []; //节点数据集
var links = []; //节点间的关系
/******************************************************************
* 作用:遍历数据集,形成所需数据集
* 数据集形式:
* data = [{id: number, name: string},...],
* links = [{source: number, target: number},...]
* 变量:
* n1|n2 :文件中邮件的发送方|接收方
* EMPTY :表示节点在data中不存在
* pos1|pos2 :保存发送方|接收方id号,值为EMPTY表示该对象对应节点不存在
* data :存放关系图各节点id号和名称name
* links :存放关系图各边的源节点id号source和目标节点id号target
*******************************************************************/
for(let i=0; i<csvdata.length; i++){
//遍历读取的csv数据集
let n1 = csvdata[i].from.slice(0,csvdata[i].from.indexOf('@'));
let n2 = csvdata[i].to.slice(0,csvdata[i].to.indexOf('@'));
let EMPTY = -1;
let pos1 = EMPTY;
let pos2 = EMPTY;
for(let j=0; j<data.length; j++){
if(data[j].name == n1){
pos1 = j;
}
if(data[j].name == n2){
pos2 = j;
}
}
if(pos1 == EMPTY){
pos1 = data.length;
data.push({
id:pos1, name:n1});
}
if(pos2 == EMPTY){
pos2 = data.length
data.push({
id:pos2, name:n2});
}
links.push({
source:pos1, target:pos2});
}
console.log(data);
console.log(links);
var myChart = echarts.init(document.getElementById('main'));
var option = {
//绘制关系图对应的参数设置
backgroundColor:'#333', //背景色
title:{
//标题
text:'关系图',
top:'5%',
left:'5%',
textStyle:{
color:'#fff',
fontSize: 30
}
},
tooltip:{
}, //提示框
series:[ //数据对应图表映射关系
{
name: '邮箱代号', //提示框显示标题
type:'graph', //图表类型
layout: 'force', //摆放位置
data:data, //数据集
links:links, //关系集,通过id与数据集联系
roam: true, //鼠标缩放
animation: false, //是否显示动画
draggable: true, //是否可拖拽
force:{
edgeLength: 90, //边的两个节点之间的距离
repulsion: 70, //节点之间的斥力因子,值越大,斥力越大
gravity: 0.1 //节点受到的向中心的引力因子,值越大,越往中心靠拢
},
label:{
//提示框内容显示样式
show: true,
color:'#fff',
opacity:1,
position:'top',
formatter:'{b}',
},
labelLayout:{
hideOverlap: false //隐藏重叠标签
},
itemStyle:{
//节点样式
normal:{
borderWidth:0,
color:'#9a60b4',
opacity:0.8 //透明度,0-1,接近0表示透明度越大
}
},
lineStyle:{
//节点连线(边)样式
color:'#3ba272',
width: 0.1,
curveness:0.05 //边的曲度,值越大曲度越大
},
emphasis:{
//高亮显示
scale: true,
focus: 'adjacency', //鼠标覆盖的节点相连的节点都高亮显示
}
}
]
} ;
myChart.setOption(option);
}
});