D3根據(jù)數(shù)據(jù)的內(nèi)容操縱HTML文檔對象，實(shí)現(xiàn)把數(shù)據(jù)變成可視圖。要操縱文檔對象，例如在里添加一個(gè)、編輯標(biāo)簽里的一個(gè)矩形，要完成這些首先需要能定位到我們需要操作的元素。再結(jié)合數(shù)據(jù)操作這些元素。

本篇具體展開D3用于選擇及增刪文檔對象的方法以及數(shù)據(jù)綁定的方法。

元素定位

var svg=d3.select("body").append("svg") .attr("width",600).attr('height',500);svg.append("rect").style("fill","#1EAFAE") .attr("x",30).attr("y",50).attr("width",60).attr("height",80);

回顧一下前一篇里的D3代碼框架，選定HTML里后增加一個(gè)標(biāo)簽并設(shè)置長寬分別為600和500像素，對這個(gè)新建的標(biāo)簽進(jìn)行修改，在[30,50]坐標(biāo)處添加了一個(gè)長寬[60,80]的矩形。這種寫法是D3可視化后續(xù)內(nèi)容的基礎(chǔ)，需要充分理解。

d3的select()方法用于查詢滿足條件的第一個(gè)HTML文檔對象，傳入一個(gè) CSS 選擇符，返回DOM 中匹配的第一個(gè)元素的引用。典型用法如下：

?d3.select("body") ; //選擇HTML里的body元素；?d3.select("#apple"); //選擇id為apple的元素；例如會匹配上

一段文本

；?d3.select(".apple"); //選擇class為apple的元素；會匹配上

一段文本

；

如果想獲得所有滿足條件的元素，用selectAll()方法，寫法和上面一致，把select變成selectAll，例如d3.selectAll(".content")實(shí)現(xiàn)的是選定class為content的所有元素、selectAll("ul li")選中ul中所有的li元素。關(guān)于select和selectAll的參數(shù)，還可以是已經(jīng)被DOM API選擇的元素，例如以下代碼結(jié)合JavaScript本身API和d3的select選中id為apple的元素。

var apple = document.getElementById("apple");d3.select(apple);

我們在選擇了需要操作的svg元素后，通常需要添加rect(矩形)等圖形，用append()方法添加元素，d3.select("svg").append("rect")便在html文檔里的標(biāo)簽下從無到有地增加了一個(gè)元素；insert()方法在所選元素前添加一個(gè)元素；remove()方法在DOM中刪除滿足條件的元素；增刪改查的關(guān)鍵詞和SQL很像，實(shí)現(xiàn)的目標(biāo)也相同。

設(shè)定屬性

選定或添加我們需要操縱的元素后，便可以編輯元素的屬性，例如圖形位置、填充色、標(biāo)識等屬性。通過.attr(name,value)給所選元素添加屬性，name是屬性名稱,value是屬性值。例如svg里有一個(gè)矩形rect，

，給rect設(shè)置id為bar1，class為bar，高度為50，則attr的寫法和結(jié)果為：

svg.select("rect") .attr("id","bar1") .attr("class","bar") .attr("height",50);/**/

應(yīng)用attr的效果相當(dāng)于在元素標(biāo)簽中添加了name="value"的標(biāo)記。而要知道某個(gè)元素的某個(gè)屬性值，可以寫：

var bar_h=d3.select("#bar").attr("height");//獲取選中矩形的高度，從而設(shè)置文本標(biāo)簽位置

.style("name","val")設(shè)置元素的css屬性，例如設(shè)置選中矩形的填充色為青色，則可以寫svg.select("rect").style("fill","#1EAFAE")，對應(yīng)在生成的HTML文檔里是這種結(jié)構(gòu)。

d3設(shè)定矩形屬性

數(shù)據(jù)綁定

為了實(shí)現(xiàn)將數(shù)據(jù)映射元素的位置和樣式屬性，d3有方便的接口用于數(shù)據(jù)和選定元素的綁定。通過datum(val)將數(shù)據(jù)val綁定到選中的所有元素，d3.selectAll("rect").datum(76)給所有的矩形綁定了數(shù)據(jù)76，用F12調(diào)出控制臺看看呀看到對應(yīng)矩形對象內(nèi)置的__data__的值是76。

通過data(vals[,key])綁定數(shù)組vals中的每一項(xiàng)到選中的元素，key是一個(gè)用于指定綁定規(guī)則的函數(shù)。

var dataset = [ 5, 10, 15, 20, 25 ];d3.select("body").selectAll("svg") .data(dataset) .enter() .append("svg") .attr("class",'bar') .style("background-color","#1EAFAE") .attr("width",50) .attr("height",function(d){return d*10 +"px";});

數(shù)據(jù)集與矩形綁定

當(dāng)有一個(gè)數(shù)據(jù)集時(shí)，通常添加元素和數(shù)據(jù)行數(shù)是密切相關(guān)的，例如在繪制柱狀圖時(shí)，一般做法是新建一個(gè)svg元素，內(nèi)部有多少個(gè)矩形柱預(yù)先不需要知道，通過enter()這一神奇的方法便可以根據(jù)數(shù)據(jù)確定元素的個(gè)數(shù)，于是上面的代碼就不難理解了，初始時(shí)body標(biāo)簽里并沒有svg元素，但可以寫d3.select("body"). selectAll("svg")選定對象，因?yàn)楹竺孢B綴地寫了.data(dataset). enter().append("svg")，便根據(jù)數(shù)據(jù)dataset的長度生成了對應(yīng)數(shù)量的svg，這樣前面的select便有了對應(yīng)的元素。

數(shù)據(jù)處理

當(dāng)我們有一系列數(shù)據(jù)之后，在可視化之前，通常還需要進(jìn)行一些數(shù)據(jù)處理，例如排序、統(tǒng)計(jì)等。D3根據(jù)數(shù)據(jù)可視化的需求封裝了不少數(shù)組處理的函數(shù)。

?d3.min(array[, accessor])：返回?cái)?shù)組最小值，第一個(gè)參數(shù)array是數(shù)組,第二個(gè)參數(shù)accessor是可選參數(shù)。accessor是一個(gè)函數(shù),指定之后,數(shù)組各項(xiàng)首先會調(diào)用accessor,然后再使用原函數(shù)function進(jìn)行處理。經(jīng)典用法是：var m=d3.min([76,37,90,60,50])；?d3.max(lst)：獲得數(shù)組最大值，和min用法一致；?d3.extend(lst)：返回?cái)?shù)組最小值和最大值，獲得的是兩個(gè)值。相當(dāng)于分別調(diào)用d3.min()和d3.max(),返回值是一個(gè)數(shù)組,第一項(xiàng)是最小值,第二 項(xiàng)是最大值；?d3.sum(lst)：返回?cái)?shù)組的求和，如果數(shù)組為空，則返回0；?d3.mean(lst)：獲得數(shù)組的平均值，如果數(shù)組為空，則返回undefined；?d3.median(lst)：獲得數(shù)組中位數(shù)；?d3.quantile(lst, p)：求取p分位點(diǎn)的值,p的范圍為[0,1]。數(shù)組需先遞增排序。?d3.shuffle(array[, lo[, hi]])：隨機(jī)排列數(shù)組；?d3.variance(lst)：求方差，對應(yīng)的d3.deviation(lst)求標(biāo)準(zhǔn)差；?d3.ascending(a,b)，遞增函數(shù)。如果a小于b,返回–1;如果a大于b,返回1;如果a等于b,返回0，一般用來進(jìn)行排序，對應(yīng)的有d3.descending(a,b)；

d3.ascending()需要和JavaScript的排序函數(shù)結(jié)合使用；

var dataset = [76,37,90,60,50];dataset.sort(d3.descending);console.log(dataset); //[90, 76, 60, 50, 37]

sort函數(shù)本身不需要傳入d3.ascending效果也是順序的。

本地?cái)?shù)據(jù)可視化

我們可以將數(shù)據(jù)全部復(fù)制寫到標(biāo)簽里的JavaScript代碼中，但數(shù)據(jù)集和JavaScript代碼的獨(dú)立也是很重要的需求，通過d3.csv("food.csv", function(data) {dataset=data;})可以讀取本地的csv文件數(shù)據(jù)進(jìn)行使用，這是寫JavaScript代碼很常用的寫法。

d3.csv("bar-data.csv", function(dataset) { d3.select("body").selectAll("svg") .data(dataset) .enter() .append("svg") .style("background-color","#1EAFAE") .attr("width",50) .attr("height",function(d){return d*10 +"px";});});

讀取json文件的接口也類似，通過d3.json("bar-data.json", function(data) {})來進(jìn)行json文件的處理。

d3對數(shù)據(jù)格式的支持是很充分的，除csv和json這兩種外，d3有：

?d3.tsv("bat.tsv"，function(data) {})用于讀取處理TSV表格文件;?d3.xml()：讀取XML格式文件；?d3.html()：讀取HTML文件；?d3.txt()：讀取文本文件；

正常情況下我們可以直接在瀏覽器中查看本地HTML文件，但涉及本地?cái)?shù)據(jù)文件時(shí)，瀏覽器出于安全考慮，可能會限制JavaScript加載本地文件，這時(shí)候我們需要開一個(gè)web服務(wù)器來響應(yīng)web請求從而傳遞文件，基于Python的http.server在特定位置和端口監(jiān)聽網(wǎng)絡(luò)請求很簡單。通過語句python -m http.server 8888 &結(jié)合http://localhost:8888/demo1.html就可以方便地加載本地的數(shù)據(jù)文件了。

python hettp server

總結(jié)

要用數(shù)據(jù)驅(qū)動文檔，需要解決的問題有：如何正確選擇需要操作的元素？如何增刪改標(biāo)簽和屬性？如何把數(shù)據(jù)和元素綁定？如何讀本地文件里的數(shù)據(jù)和元素綁定？

本篇講述了實(shí)現(xiàn)以上需求的D3方法和具體代碼。通過select(v)和selectAll選定元素；append、insert和remove方法用于增加、插入和刪除元素；attr(name,value)給所選元素添加屬性；style("name","val")設(shè)置元素的樣式屬性；datum(val)和data(vals[,key])用于綁定數(shù)據(jù)到元素上；d3提供了d3.json()讀取本地文件、提供了d3.sum()等統(tǒng)計(jì)函數(shù)進(jìn)行數(shù)據(jù)處理。

總結(jié)

以上是生活随笔為你收集整理的如何获取某个标签下所有的元素id_D3库实践笔记之元素定位与数据绑定 |可视化系列33...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。