1實(shí)驗(yàn)概述針對(duì)多元數(shù)據(jù)的可視化方式非常多種多樣。本實(shí)驗(yàn)完成其中非常常用的雷達(dá)圖和平行坐標(biāo)統(tǒng)計(jì)圖，適合對(duì)多元數(shù)據(jù)進(jìn)行對(duì)比和分析。實(shí)驗(yàn)?zāi)康耐瓿杀緦?shí)驗(yàn)后，應(yīng)該能夠制作雷達(dá)圖制作平行坐標(biāo)統(tǒng)計(jì)圖實(shí)驗(yàn)背景為了更好的進(jìn)行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網(wǎng)dcloud.io上下載其最新版本。在其“邊改邊看模式”進(jìn)行代碼修改，可以直接看到顯示效果。在服務(wù)器上下載本實(shí)驗(yàn)的代碼模板，插件和數(shù)據(jù)，加入到Hbuilder的項(xiàng)目目錄中，完成實(shí)驗(yàn)環(huán)境準(zhǔn)備，就可以開始實(shí)驗(yàn)了。實(shí)驗(yàn)步驟數(shù)據(jù)背景：我們針對(duì)NBA金州勇士隊(duì)的球員在16-17賽季常規(guī)賽的個(gè)人表現(xiàn)數(shù)據(jù)，進(jìn)行分析展示。因?yàn)槊總€(gè)球員都有籃板，助攻，失誤，犯規(guī)次數(shù)等等多項(xiàng)指標(biāo)，我們可以通過雷達(dá)圖對(duì)相關(guān)的指標(biāo)進(jìn)行綜合展示，有助于查看每個(gè)球員的個(gè)人特點(diǎn)。進(jìn)入實(shí)驗(yàn)環(huán)境：1、使用編輯器打開MyDemo\Test-07\0701-chart-radar.html2、設(shè)置雷達(dá)圖各個(gè)角對(duì)應(yīng)的數(shù)據(jù)列處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//每一數(shù)據(jù)節(jié)點(diǎn)圓半徑//每一個(gè)雷達(dá)圖寬度////每一數(shù)據(jù)節(jié)點(diǎn)圓半徑//每一個(gè)雷達(dá)圖寬度//每一個(gè)雷達(dá)圖高度RadarChart.defaultConfig.w=150;RadarChart.defaultConfig.h=150;RadarChart.draw("#myChart",convertData);5、使用Chrome打開界面呈現(xiàn)效果如下數(shù)據(jù)背景：對(duì)同樣的數(shù)據(jù)，我們想了解球員的各個(gè)表現(xiàn)之間是否有一定的關(guān)聯(lián)，可以通過平行坐標(biāo)統(tǒng)計(jì)圖的方式得以更好的展示和發(fā)覺。1、使用編輯器打開Test-07\0702-parallel-coordinates.htmlrsvarx=d3.scaleBand().rangeRound([0,width]).domain(yType),y={};//y軸有多個(gè)根據(jù)yType數(shù)據(jù)生成varcolors=d3.schemeCategory20;yType.forEach(function(d){23y[d]=d3.scaleBand().rangeRound([height,0]).domain(data.map(function(n){returnn[d]}))}else{//數(shù)字列全部使用線性比例尺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;運(yùn)行后結(jié)果顯示如下4繪制數(shù)據(jù)線條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)運(yùn)行結(jié)果如下圖所示5修改雷達(dá)圖的數(shù)據(jù)列，可以針對(duì)其他相關(guān)指標(biāo)進(jìn)行雷達(dá)圖顯示，也可以