数据可视化基础实验7：完成多元数据的展示图表

1实验概述针对多元数据的可视化方式非常多种多样。本实验完成其中非常常用的雷达图和平行坐标统计图，适合对多元数据进行对比和分析。实验目的完成本实验后，应该能够制作雷达图制作平行坐标统计图实验背景为了更好的进行前端代码编程，我们推荐使用Hbuilder的编辑器，可以到其官网dcloud.io上下载其最新版本。在其“边改边看模式”进行代码修改，可以直接看到显示效果。在服务器上下载本实验的代码模板，插件和数据，加入到Hbuilder的项目目录中，完成实验环境准备，就可以开始实验了。实验步骤数据背景：我们针对NBA金州勇士队的球员在16-17赛季常规赛的个人表现数据，进行分析展示。因为每个球员都有篮板，助攻，失误，犯规次数等等多项指标，我们可以通过雷达图对相关的指标进行综合展示，有助于查看每个球员的个人特点。进入实验环境：1、使用编辑器打开MyDemo\Test-07\0701-chart-radar.html2、设置雷达图各个角对应的数据列处varconvertData=[];data.forEach(function(d){vartemp={};temp.axes=[];for(vari=0;i<yType.length;i++){temp.axes.push({"axis":[yType[i]],"value":d[yType[i]]})}convertData.push(temp);rChart//每一数据节点圆半径//每一个雷达图宽度////每一数据节点圆半径//每一个雷达图宽度//每一个雷达图高度RadarChart.defaultConfig.w=150;RadarChart.defaultConfig.h=150;RadarChart.draw("#myChart",convertData);5、使用Chrome打开界面呈现效果如下数据背景：对同样的数据，我们想了解球员的各个表现之间是否有一定的关联，可以通过平行坐标统计图的方式得以更好的展示和发觉。1、使用编辑器打开Test-07\0702-parallel-coordinates.htmlrsvarx=d3.scaleBand().rangeRound([0,width]).domain(yType),y={};//y轴有多个根据yType数据生成varcolors=d3.schemeCategory20;yType.forEach(function(d){23y[d]=d3.scaleBand().rangeRound([height,0]).domain(data.map(function(n){returnn[d]}))}else{//数字列全部使用线性比例尺y[d]=d3.scaleLinear().rangeRound([height,0]).domain([0,d3.max(data,function(n){returnn[d]})])}g.attr("transform","translate("+(margin.left+x.bandwidth())+","+margin.top+")");varaxis=g.selectAll(".axis-type").data(yType).enter().append("g").attr("class","axis-type").attr("transform",function(d){return"translate("+x(d)+")";axis.append("g").attr("class","axisaxis-y").each(function(d){d3.select(this).call(d3.axisLeft(y[d]).ticks(data.length))axis.append("text").attr("dy","-10").attr("text-anchor","middle").text(function(d){returnd;运行后结果显示如下4绘制数据线条varline=d3.line();functionpath(d){returnline(yType.map(function(n){return[x(n),y[n](d[n])]}g.selectAll(".data-path").data(data).enter().append("path").attr("class","data-path").attr("fill","none").attr("stroke-width","2").attr("stroke",function(d,i){returncolors[i];.attr("d",path)运行结果如下图所示5修改雷达图的数据列，可以针对其他相关指标进行雷达图显示，也可以