结对第二次作业——某次疫情统计可视化的实现

这个作业属于哪个课程	2020春|S班
这个作业要求在哪里	作业要求
结对学号	221701308、221600313
这个作业的目标	实现疫情统计可视化
作业正文	作业正文
其他参考文献	CSDN，博客园，百度，知乎

仓库链接和代码规范

https://github.com/jieduizuoye2/InfectStatisticWeb/tree/dev

成品展示

结对过程

设计实现过程

功能结构图：

将实现内容拆分为图片相关（全国地图鼠标移动高亮、单击跳转；折线图；日期变化时根据数据修改图片）和其余部分，分工合作；
svg图片自身即有一部分交互性，所以选择使用svg图片制作；
单击跳转通过添加链接即可实现，高亮通过改变填充色即可；通过改变属性“points”即可改变已有折线图；
通过循环遍历所选日期及其前n天数据，计算x、y值，添加到字符串中，最后作为setAttribute的参数之一，修改属性“points”；
中途发现折线图的X轴坐标（对应日期），在日期改变时需要一并修改，本来想直接修改text标签的显示，但经过尝试未找到可用方法，所以转而尝试将它隐藏（填充改为白色），然后添加新的text

关键代码

在svg图像中，各省部分添加链接，实现单击跳转；直接使用svg交互事件完成鼠标移动区域高亮显示

        <a xlink:href="Tianjin.html">
        <path id="Tianjin" fill="pink" stroke="black" stroke-width="1" d="M 1034.53 440.88 C 1034.45 445.55 1035.14 448.38 1035.73 452.77 C 
        1034.15 452.59 1029.68 451.32 1028.54 452.77 C 1026.44 455.17 1030.54 462.59 1030.75 465.48 C 1030.75 465.48 1029.23 476.29 1029.23 
        476.29 C 1029.14 477.52 1029.15 478.73 1029.74 479.86 C 1030.82 481.91 1035.83 485.05 1038.13 485.33 C 1039.84 485.53 1046.75 483.9 
        1048.98 483.49 C 1048.98 483.49 1048.98 477.49 1048.98 477.49 C 1049.42 474.28 1051.86 466.02 1054.45 464.13 C 1055.62 463.27 1056.56 
        463.24 1057.93 463.08 C 1057.93 463.08 1053.73 451.68 1053.73 451.68 C 1053.73 451.68 1048.93 452.88 1048.93 452.88 C 1048.93 452.88 
        1045.61 446.88 1045.61 446.88 C 1045.61 446.88 1044.13 439.68 1044.13 439.68 C 1044.13 439.68 1048.33 438.48 1048.33 438.48 C 1044.75 
        434.42 1037.63 430.46 1034.89 437.88 C 1034.54 438.82 1034.55 439.9 1034.53 440.88 C 1034.53 440.88 1034.53 440.88 1034.53 440.88 Z" 
        >
        <set attributeName="fill" from="pink" to="yellow" begin="mouseover" end="mouseout"/>
        </path>
        </a>

日期改变时，依次确认各省确诊人数区间，更改填充色

        for(var i=0;i<city.length;i++){//根据当前确诊人数调整地图颜色
            var nowchange = document.getElementById(city[i]);
            if( date[i] >= 10000 ){
                nowchange.setAttribute("fill","black");
            }
            else if( date[i] >= 1000 ){
                nowchange.setAttribute("fill","red");
            }
            else if( date[i] >= 1 ){
                nowchange.setAttribute("fill","pink");
            }
            else{
                nowchange.setAttribute("fill","white");
            }
        }

选择新增确诊趋势/累计确诊趋势/累计治愈趋势/累计死亡趋势时，已选择对象对应按钮填充亮色提示，其余按钮填充灰色

        var rect0 = document.getElementById('rect0');
        var rect1 = document.getElementById('rect1');
        var rect2 = document.getElementById('rect2');
        var rect3 = document.getElementById('rect3');
        rect0.addEventListener('click', function(e) {
            console.log('rect0 clicked - enlarging');
            rect0.setAttribute("fill","rgb(30, 170, 212)");
            rect1.setAttribute("fill","rgb(196, 191, 191)");
            rect2.setAttribute("fill","rgb(196, 191, 191)");
            rect3.setAttribute("fill","rgb(196, 191, 191)");
            CreatPolyLine(nDate,0);
        }, false);
        rect1.addEventListener('click', function(e) {
            console.log('rect1 clicked - enlarging');
            rect1.setAttribute("fill","rgb(30, 170, 212)");
            rect0.setAttribute("fill","rgb(196, 191, 191)");
            rect2.setAttribute("fill","rgb(196, 191, 191)");
            rect3.setAttribute("fill","rgb(196, 191, 191)");
            CreatPolyLine(nDate,1);
        }, false);
        rect2.addEventListener('click', function(e) {
            console.log('rect2 clicked - enlarging');
            rect2.setAttribute("fill","rgb(30, 170, 212)");
            rect1.setAttribute("fill","rgb(196, 191, 191)");
            rect0.setAttribute("fill","rgb(196, 191, 191)");
            rect3.setAttribute("fill","rgb(196, 191, 191)");
            CreatPolyLine(nDate,2);
        }, false);
        rect3.addEventListener('click', function(e) {
            console.log('rect3 clicked - enlarging');
            rect3.setAttribute("fill","rgb(30, 170, 212)");
            rect1.setAttribute("fill","rgb(196, 191, 191)");
            rect2.setAttribute("fill","rgb(196, 191, 191)");
            rect0.setAttribute("fill","rgb(196, 191, 191)");
            CreatPolyLine(nDate,3);
        }, false);

字符串存储计算结果，以结果作为“points”属性值，修改原有折线图；使原有坐标刻度填充白色（不可见），添加新刻度，实现X轴日期标识的更新

        //生成趋势折线图,参数nDate为当前所选日期在date数组中所在位置
        //style：0-新增确诊趋势，1-累计确诊趋势，2-治愈趋势，3-死亡趋势
        function CreatPolyLine(nDate,style){
            polyline="";
            var i = ( ( nDate >= date.length ) ? ( nDate - point ) : 0 );
            var poly = document.getElementById('poly');
            var j;
            for( j = 0 ; i <= nDate ; i ++ ,j ++ ){
                var x = 30 + 70 * j ;
                var y = 380 - ( date[nDate][style] * ( 70 / 3000 ) );
                polyline += x + "," + y ;
                if ( ( i + 1 ) <= nDate ){
                    polyline += " ";
                }
            }
            poly.setAttribute("points",polyline);

            //隐藏原有X轴坐标
            var oldText =document.getElementsByTagName("text");
            for( j =0 ; j < oldText.length ; j ++){
                if(oldText[j].getAttribute("y") == 400){
                    oldText[j].setAttribute("fill","white");
                }
            }

            //建立新X轴坐标
            i = ( ( nDate >= date.length ) ? ( nDate - point ) : 0 );
            for( j = 0 ; i <= nDate ; j ++ , i ++ ){
                var svg =document.getElementById('mysvg');
                var sdate ="";
                var x = "" ;
                x = 10 + j * 70 ;
                sdate += howManyDate [i];
                var newText = document.createElementNS("http://www.w3.org/2000/svg", "text");
                newText.setAttribute("x", x);
                newText.setAttribute("y", "400");
                newText.setAttribute("fill", "#333");
                newText.appendChild(document.createTextNode(sdate));
                svg.appendChild(newText);
            }
        }

心路历程与收获

本次实现中涉及了不少过去几年大学生活中没有接触过的部分，在尝试自学的过程中，绕了不少弯路，只能先搜索需要的功能实现方法，然后慢慢摸索，让我深刻意识到了通过课堂、参考书等获取知识相较自学的便利性。
通过与同伴合作，可以回避自身不拿手的部分，且在面对众多不熟悉知识时，减少了个人在短时间内需要探索、掌握的知识量。
对合作同伴的评价：给我提供了很多帮助，感谢他在作业完成过程中的努力。