D3是一個(gè)基于數(shù)據(jù)操作的可視化js庫(kù)，認(rèn)識(shí)d3，就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起。
html的基本框架不多說，先上代碼再解釋：
新建一個(gè)test目錄，在該目錄下創(chuàng)建demo和d3兩個(gè)文件夾。demo存放要編寫的html文件 ， d3存放d3.v3.js
在demo文件夾下新建indexP.html，將下面代碼復(fù)制其中，雙擊在瀏覽器打開查看效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>D3: Setting paragraphs' style conditionally, based on data</title> <script type="text/javascript" src="../d3/d3.v3.js"></script> </head> <body> <script type="text/javascript"> var dataset = [ 5, 10, 15, 20, 25 ]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text(function(d) { return "I can count up to " + d; }) .style("color", function(d) { if (d > 15) { //Threshold of 15 return "red"; } else { return "black"; } }); </script> </body> </html> 這個(gè)簡(jiǎn)單demo實(shí)現(xiàn)的功能：在body中添加p標(biāo)簽，在p標(biāo)簽中添加d3加載的文本內(nèi)容，并根據(jù)函數(shù)設(shè)置條件對(duì)文字顏色進(jìn)行調(diào)整。
上面的網(wǎng)頁(yè)代碼，body里面的js代碼，是展現(xiàn)到頁(yè)面的數(shù)據(jù)操作。以后的不少例子，只要修改這一塊便可，其他部分可看做頁(yè)面框架。
這里的內(nèi)容上篇文章大體都講到了，使用d3的連綴，將同一對(duì)象的一步步數(shù)據(jù)操作連接起來，便于維護(hù)。
d3.select("body") 選擇body元素，并連綴到下一方法
.selectAll("p") 選中所有段落
.data(dataset) 解析加載數(shù)組數(shù)據(jù)，該數(shù)組長(zhǎng)度是5， 以后連綴的每個(gè)方法都將執(zhí)行五次，按數(shù)組下標(biāo)依次針對(duì)數(shù)組元素執(zhí)行方法操作
.enter() 創(chuàng)建新的綁定數(shù)據(jù)的占位元素（相當(dāng)于創(chuàng)建暫時(shí)不知名標(biāo)簽5個(gè)）。
創(chuàng)建的個(gè)數(shù) 要根據(jù)選擇的已有標(biāo)簽數(shù)和加載的數(shù)據(jù)數(shù)組長(zhǎng)度決定。
如本例，如果body中p標(biāo)簽少于5個(gè)，就創(chuàng)建（現(xiàn)在body中p為0個(gè)，故創(chuàng)建5個(gè)），
多于就不創(chuàng)建，最后的占位元素和p元素總個(gè)數(shù)要為5。
.append("p") 將占位元素改為p元素
.text(function(d) {}) 對(duì)每個(gè)段落的顯示內(nèi)容，寫個(gè)匿名函數(shù)控制，一般返回字符串。在該方法你可以 任意編寫，
本例讓他每段落輸出I can count up to 加上相應(yīng)數(shù)組元素值
函數(shù)格式是固定的，function(d)只有這樣,才能將數(shù)據(jù)加載到函數(shù)中。
.style("color","") 設(shè)置css的文本顏色屬性，同text一樣，設(shè)置的字符串都可以用function進(jìn)行你想要的操作。本例中，如果該段落所對(duì)應(yīng)的傳入數(shù)值大于15，就把該行變紅
最后，我們看到的效果就是如圖：
本文就介紹到這里，下文介紹如何在SVG中繪制圓，以及圓圓相連的簡(jiǎn)單用力圖
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
