数据可视化基础实验5：完成时间序列的图表

1实验概述时间序列图是可视化的重要组成部分，本实验对天气数据进行可视化展示，通过折线图表现线性时间的相关属性展示，以及周期日历图表现周期时间的属性的可视化展示。实验目的完成本实验后，应该能够创建时间序列坐标轴，及线性时序数据的可视化为报表添加图例为报表添加简单交互操作完成时间周期统计图，完成周期数据的展示。实验准备为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤数据背景：基于上海市某一天内的各个地区，每个小时段的天气观测数据，包括时间，观察站点，温度等。可视化的图表对比上海各区在一天的时间内的温度差异。我们用平滑线图的方式来展示线性时序数据，并用不同颜色的曲线来表示不同区在一天中的温度变化。进入实验环境：1、使用编辑器打开MyDemo\Test-05\0501-time-series.htmlYZvarx=d3.scaleTime().rangeRound([0,width]),2y=d3.scaleLinear().rangeRound([height,0]),z=d3.scaleOrdinal(d3.schemeCategory20);设置X,Y,Z值域x.domain(d3.extent(data,function(d){returnd['时间']}));y.domain([d3.min(groupData,function(gd){returnd3.min(gd.values,function(d){returnd['温度'];})}),d3.max(groupData,function(gd){returnd3.max(gd.values,function(d){returnd['温度'];})})z.domain(groupData.map(function(d){returnd.key}));设置曲线路径varlinePath=d3.line().curve(d3.curveCatmullRom.alpha(0.5)).x(function(d){returnx(d['时间'])}).y(function(d){returny(d['温度'])});g.append("g").attr("class","axisaxis-x").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x).ticks(24));g.append("g").attr("class","axisaxis-y").call(d3.axisLeft(y).ticks(10)).append("text").attr("transform","translate(-10,0)").text("°C").attr("fill","#383838");绘制曲线varregion=g.selectAll("region-g").data(groupData).enter().append("g").attr("class","region-g");//绘制曲线region.append("path").attr("class","region-line").attr("id",function(d,i){return"region-line"+i;3.attr("d",function(d){returnlinePath(d.values).attr("stroke",function(d){returnz(d.key);7、使用Chrome打开界面呈现效果如下varlegendSize=15,legendOffset=6;region.append("rect").attr("class","region-legend").attr("transform",function(d,i){return"translate("+(width+legendOffset)+","+(i*(legendSize+legendOffset))+")";.attr("width",legendSize).attr("height",legendSize).attr("fill",function(d){returnz(d.key)}).call(callEvent);//绘制图例中的文字region.append("text").attr("class","region-label")4.attr("class","region-label").style("font","10pxsans-serif").attr("dy","1.12em").attr("transform",function(d,i){return"translate("+(width+legendOffset*2+legendSize)+","+(i*(legendSize+legendOffset))+")";}).text(function(d){returnd.key})g.select(".axis-x").selectAll("text").attr("transform","rotate(45)").attr("x","10").attr("y","15");9、使用Chrome打开界面呈现效果如下region.call(callEvent);functioncallEvent(){if(arguments){arguments[0].on("mouseover",function(d,i){d3.selectAll(".region-line").transition().duration(500).attr("stroke-width",'1').attr("opacity","0.2");5d3.select("#region-line"+i).transition().duration(500).attr("stroke-width",'4').attr("opacity",'1').on("mouseout",function(d,i){d3.selectAll(".region-line").transition().duration(500).attr("stroke-width",'2').attr("opacity","1");d3.select("#region-line"+i).transition().duration(500).attr("stroke-width",'2')}}数据背景：基于上海市2015年1月1日到2017年3月31日每天的温度数据，我们希望能够直观的了解气温的变化，并能快速定位反常天气的日期。我们采用日历图表来可视化这些数据，并用