在去年的這個時候，d3.js在github上的star數(shù)目剛20多k藏雏，如今人數(shù)已經(jīng)飆升至67k拷况，其風靡程度可見一般，隨著大數(shù)據(jù)的發(fā)展掘殴，數(shù)據(jù)可視化也被越來越被重視赚瘦，前端工程師中又多出來一個發(fā)展方向—— 數(shù)據(jù)可視化工程師。
數(shù)據(jù)可視化的制作除了需要扎實的前端功底以外奏寨，還涉及了大量的數(shù)學計算起意，算法優(yōu)化，這些無疑又提高了數(shù)據(jù)可視化的門檻病瞳。我曾經(jīng)加過一個可視化的交流群揽咕，有人開出了 10k/day 的公司培訓價格，然鮮有人回復套菜，可見可視化人才之奇缺亲善。
學好數(shù)據(jù)可視化，走遍天下都不怕逗柴。學習可視化的同時蛹头，你除了可以學習制作更加炫酷的樣式，還可以錘煉自己js技能，提升自我的算法能力渣蜗，前端編程屠尊，無外乎css和js嗎？ js足夠強大耕拷，就算以后有千千萬萬個框架讼昆，不都萬變不離其宗， 底層還是js骚烧，到時勢必左右逢源浸赫，如魚得水！
回到這個系列的主題止潘，幸運的是d3.js把許多f方法都替我們封裝好了掺炭，涉及到的最底的物理數(shù)學計算已經(jīng)很完備了辫诅，我們只需在此基礎上進行開發(fā)就行了凭戴。我的學習方法是先學會基本的api，在此基礎上炕矮，我們以做帶學么夫，通過學習制作可視化圖表，理解其實現(xiàn)原理肤视，查漏補缺档痪，并逐步將其變成自己的東西。
今天開始第一節(jié)邢滑，d3初探--創(chuàng)建更新dom及其上面綁定的數(shù)據(jù)
頂部先引入d3.js
<script src="https://d3js.org/d3.v4.min.js"></script>
js繪制部分
創(chuàng)建比例尺
當我們拿到數(shù)據(jù)的時候腐螟，很多數(shù)據(jù)可能值過大或者過小，這時候我們就需要對數(shù)據(jù)進行預處理困后，將數(shù)據(jù)處理成合適的取值范圍乐纸，便于我們進行生成圖表
var data = [12, 25, 13, 23, 24, 55, 25, 30];
var dataRange = d3.scaleLinear() //創(chuàng)建一個值域的線性比例尺
.domain([0,100])
.range([0,300]);
var colorRange = d3.scaleLinear() //創(chuàng)建一個顏色的線性比例尺
.domain([0,100])
.range(["#29B6F6", "#01579B"]);
編寫渲染函數(shù)
function render(data){
-------渲染函數(shù)內(nèi)部如下------
}
// Enter 當前選擇中存在但是當前DOM元素中還不存在的每個數(shù)據(jù)元素的占位符節(jié)點。
d3.select("body").selectAll("div.rect")
.data(data) //綁定數(shù)據(jù)與圖形
.enter() //進入狀態(tài)（增加圖形匹配多余的數(shù)據(jù)）
.append("div") //生成dom節(jié)點摇予，此時已有可顯示dom
.attr("class","rect") //添加類名
.append("span"); //添加span
// Update
d3.select("body").selectAll("div.rect")
.data(data) //綁定數(shù)據(jù)到dom 節(jié)點
.style("width",function(d){
return dataRange(d) + "px" //通過數(shù)據(jù)生成相應樣式
})
.style("background-color",function(d){
return colorRange(d);
})
.select("span") // 選取當前div下的span
.text(function(d){
return d; //調(diào)用函數(shù)汽绢，返回與該圖形綁定的數(shù)據(jù)d
});
// Exit 找出在當前選擇存在的DOM元素中沒有新的數(shù)據(jù)元素
d3.select("body").selectAll("div.rect")
.data(data)
.exit()
.remove(); （刪除沒有數(shù)據(jù)的多余的圖形）
渲染圖形
render(data); //第一次執(zhí)行
d3.interval(function(){
data.shift(); //刪除數(shù)組的第一個數(shù)據(jù),并添加一個數(shù)據(jù)
data.push(Math.round(Math.random() * 100));
render(data);
},1000); //1s執(zhí)行一次
一些樣式
body{
font-family: "helvetica";
}
.rect {
min-height: 30px;
min-width: 10px;
background-color: steelblue;
margin-bottom: 2px;
font-size: 11px;
color: #fff;
text-align: right;
padding-right: 2px;
}
好了，圖形繪制完畢侧戴。效果如下
不積跬步宁昭，無以至千里。 勿在浮沙筑高臺酗宋。初學者還是應該最簡單最基本的圖表积仗，如柱形圖，折線圖蜕猫，散點圖練習斥扛，通過對d3最基本最核心的功能學習，基礎打撈，我們才能在制作復雜圖表時更加得心應手稀颁。
