數(shù)據(jù)可視化基礎實驗2：完成D3.js的基本圖形繪制

1實驗概述在課程中，我們已經(jīng)了解什么是數(shù)據(jù)可視化，可視化的工具有哪些。此實驗將練習如果使用D3及使用D3生成點、線、面這些可視化元素。實驗目的完成本實驗后，應該能夠創(chuàng)建D3模板頁使用D3查詢dom和修改dom創(chuàng)建一個基本html元素根據(jù)數(shù)組創(chuàng)建多個div繪制基于svg的柱狀圖實驗準備為了更好的進行前端代碼編程，我們推薦使用Hbuilder的編輯器，可以到其官網(wǎng)dcloud.io上下載其最新版本。在其“邊改邊看模式”進行代碼修改，可以直接看到顯示效果。在服務器上下載本實驗的代碼模板，加入到Hbuilder的項目目錄中，完成實驗環(huán)境準備，就可以開始實驗了。實驗步驟進入實驗環(huán)境：2、使用編輯器打開MyDemo\Test-02\0201-template.html3、引入D3js文件。24、使用Chrome打開d3-template.html看到顯示的“helloworld!”說明程序運行正常,到這里D3模板頁創(chuàng)建完成，后續(xù)的代碼都是基于此界面擴展1、使用編輯器打開MyDemo\Test-02\0202-select-edit.html2、在script標簽內(nèi)注釋語句下面，編寫代碼完成獲取body標簽并修改背景色。d3.select("body").style("background-color","#dcd9c0");3、使用瀏覽器打開界面，界面將由原來默認的白色變成#dcd9c0如下圖4、同時操作多個元素d3.selectAll("p").text("改變所有p標簽內(nèi)容");結(jié)果如下：d3.selectAll("p").attr("style","height:40px;border:1pxsolidred;");結(jié)果如下：3d3.select("body").append("div").text('helloworld');輸入以上代碼將在界面中添加一個div元素并設置內(nèi)容1、使用編輯器打開MyDemo\Test-02\0203-create-divs.html，2、使用D3來生成與數(shù)組對應的DIV元素d3.select("body").selectAll("div").data(dataArray)enter).append("div").attr("class","bar")以上代碼將生成一組div,樣式名稱為bar并且手動設置了高度為20px,結(jié)果如下：43、修改代碼將數(shù)組中的值作為DIV的高。.style("height",function(d){returnd*2+"px";})結(jié)果如下在Chrome控制臺中我們可以看到每一個DIV的高度都是數(shù)組中值的兩倍，因為修改的代碼中有一個乘2操作?？梢灾纃變量就是數(shù)組中的值。4、修改最后一個DIV的邊框顏色，代碼如下.style("border",function(d,i){if(i===dataArray.length-1){return'1pxsolidblue'}以上代碼中的i表示當前節(jié)點索引，索引從零開始。刷新界面后效果如下步驟5繪制基于svg的簡易柱狀圖在以上實驗步驟中我們已經(jīng)使用會使用D3，現(xiàn)在將練習使用svg做一個簡單的柱狀圖。1、使用Chrome打開MyDemo\Test-02\0205-create-svg-bar.html，回顧svg常用標簽。2、使用編輯器打開MyDemo\Test-02\0205-create-svg-bar.html53、在第一處注釋下面完成報表繪制，代碼如下svg.selectAll(".rect-bar").data(dataArray).enter().append("rect").attr("class","rect-bar").attr("width",barWidth+"px").attr("x",function(d,i){returni*barWidth+i*10.attr("y",function(d){returnsvgHeight-d*2;4、在第二處注釋下面編寫代碼完成文字提示信息，代碼如下svg.selectAll("text").data(dataArray).enter().append("text").text(function(d){returnd;}).attr("x",function(d,i){returni*barWidth+i*10+barWidth/2;.attr("y",function(d){return