1實驗概述針對一組數據進行可視化，可以有效的展示其統計分布規律。這也是一類常見的圖表，本實驗選取其中最常用的盒形圖和直方圖。實驗目的完成本實驗后，應該能夠制作盒形圖制作直方圖實驗準備為了更好的進行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網dcloud.io上下載其最新版本。在其“邊改邊看模式”進行代碼修改，可以直接看到顯示效果。在服務器上下載本實驗的代碼模板，插件和數據，加入到Hbuilder的項目目錄中，完成實驗環境準備，就可以開始實驗了。實驗步驟數據背景：鳶尾花樣本數據是做統計分析中的常見數據。本實驗就利用這個數據，顯示花萼以及花瓣的統計數據。進入實驗環境：1、使用編輯器打開MyDemo\Test-08\0801-box-plots.html2、設置需要統計的類型，在注釋#1出編寫代碼使用封裝好的boxvarchart=d3.box().whiskers(iqr(1.5))2.height(height);functionconvert(jsonData,type){vardata=d3.nest().key(function(d){}).entries(jsonData);vartemp=[];data.forEach(function(d){varinner=[],i=0;while(d.values.length>i){inner.push(d.values[i][type]);i++;}temp.push(inner)chart.domain([d3.min(jsonData,function(d){returnd[type]}),d3.max(jsonData,function(d){returnd[type]})]);returntemp;}繪制盒子圖在注釋#2出編寫代碼vardata=convert(jsonData,filterKey);varw=30;chart.width(w);varboxPlots=g.selectAll(".box").data(data).enter().append("g").attr("class","box").attr("width",w).attr("height",height).attr("transform",function(d,i){return"translate("+i*(width/data.length)+",0)".call(chart);添加按鈕事件，用于切換展示數據d3.selectAll("button").on("click",function(){vard=convert(jsonData,this.innerText);d3.selectAll("button.current").classed("current",false);d3.select(this).classed("current",true)boxPlots.data(d).call(chart.duration(1000))36、使用Chrome打開界面呈現效果如下數據背景：根據2016年的上海每日溫度數據，了解上海的溫度的分布特點。我們通過直方圖的對溫度數據進行展示。1、使用編輯器打開MyDemo\Test-08\0802-histogram.htmlvarx=d3.scaleLinear().rangeRound([0,width]);vary=d3.scaleLinear().rangeRound([height,0]);使用D3histogramlayout,并設置X，Y軸值域x.domain(d3.extent(csvData));varhistogram=d3.histogram().domain(x.domain()).thresholds(x.ticks(50));vardata=histogram(csvData);y.domain([0,d3.max(data,function(d){returnd.length;})]);4g.append("g").attr("class","axisaxis-x").attr("transform","translate(0,"+height+")").call(d3.axisBottom(x).ticks(50))g.append("g").attr("class","axisaxis-y").call(d3.axisLeft(y));g.selectAll("rect").data(data).enter().append("rect").attr("x",function(d){returnx(d.x0);.attr("y",function(d){returny(d.length);.attr("width",function(d){returnx(d.x1)-x(d.x0);.attr("height",function(d){returnheight-y(d.length);.attr("fill",d3.schemeCategory10[0])6、運行后結果顯示如下7、打開MyDemo\Test-08\0803-histogram-detail.html8、添加提示文字bar.append("text").attr("text-anchor","middle")5.attr("x","1").attr("y","-2").attr("dx",function(d){return(x(d.x1)-x(d.x0))/2.text(function(d){returnd.length;9、添加坐標單位g.append("text").attr("x","0").attr("y","0").attr("dx","-20").attr("text-anchor","middle").text("day");g.append("text").attr("x",width+20).attr("y",