数据可视化——实验6 层次网络及文本可视化

最新推荐文章于 2024-06-12 11:13:48 发布

Layznana

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量786

点赞数

分类专栏： JavaScript 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_45918830/article/details/121487147

版权

代码原文

关系图

<!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);
                }
            });

最低0.47元/天解锁文章

Layznana

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——实验6 层次网络及文本可视化

代码原文关系图<!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"
复制链接

扫一扫