數(shù)據(jù)可視化教程:如何用D3操縱數(shù)據(jù)
定義數(shù)據(jù)——綁定數(shù)組
定義好一個(gè)數(shù)組后進(jìn)行綁定是件比較簡(jiǎn)單的事情，也是最常見(jiàn)的D3中定義數(shù)據(jù)的方式。舉個(gè)例子，我們看到多個(gè)數(shù)據(jù)存在一個(gè)數(shù)組里時(shí)，而此時(shí)你想用他們做可視化工作，并且在數(shù)組更新時(shí)希望可視化圖像也隨之更新。下面的內(nèi)容就是介紹如何實(shí)現(xiàn)這一效果。
當(dāng)然，我們需要首先定義一個(gè)數(shù)組元素：
var data = [10, 15, 30, 50, 80, 65, 55, 30, 20, 10, 8];
然后通過(guò)選擇器將這些數(shù)據(jù)與html元素綁定，渲染函數(shù)中綁定部分如下：
d3.select("body").selectAll("div.h-bar")
.data(data)
.enter()
.append("div")
.attr("class", "h-bar")
.append("span");
// Update
d3.select("body").selectAll("div.h-bar")
.data(data)
.style("width", function (d) {
return (d * 3) + "px";
})
.select("span")
.text(function (d) {
return d;
});
// Exit
d3.select("body").selectAll("div.h-bar")
.data(data)
.exit()
.remove();
函數(shù)中選中(selectAll)所有div.h-bar元素，并將其與需要繪制的數(shù)據(jù)綁定，每一個(gè)新增(append)的div元素都存放一個(gè)條形塊，其寬度由數(shù)據(jù)本身決定。
二數(shù)據(jù)則可以通過(guò)隨機(jī)數(shù)來(lái)產(chǎn)生，每隔1.5秒移除首行數(shù)據(jù)、新增一行隨機(jī)產(chǎn)生的數(shù)據(jù)，這樣使得圖表具有實(shí)時(shí)更新的效果，移除通過(guò)array.shift()函數(shù)實(shí)現(xiàn)，而新增數(shù)據(jù)用array.push()加入現(xiàn)有數(shù)據(jù)中，而這些整體作為網(wǎng)頁(yè)的呈現(xiàn)時(shí)，其刷新頻率域函數(shù)的執(zhí)行等細(xì)節(jié)可以使用setInterval()函數(shù)來(lái)實(shí)現(xiàn)。一個(gè)類似的案例代碼如下所示：
setInterval(function () {
data.shift();
data.push(Math.round(Math.random() * 100));
render(data);
}, 1500);
定義數(shù)據(jù)——對(duì)象文字（復(fù)雜數(shù)組）
要實(shí)現(xiàn)更加復(fù)雜的可視化操作，數(shù)據(jù)中的每個(gè)元素肯定都不會(huì)是單獨(dú)的一個(gè)整數(shù)，可能都是一格格的JavaScript對(duì)象，而此時(shí)我們就要想想該如何用D3將這些數(shù)據(jù)可視化出來(lái)。
假設(shè)數(shù)據(jù)如下所示：
var data = [ // <- A
{width: 10, color: 23},{width: 15, color: 33},
{width: 30, color: 40},{width: 50, color: 60},
{width: 80, color: 22},{width: 65, color: 10},
{width: 55, color: 5},{width: 30, color: 30},
{width: 20, color: 60},{width: 10, color: 90},
{width: 8, color: 10}
];
那么我們想用width來(lái)定義長(zhǎng)度，二color用來(lái)實(shí)現(xiàn)條形圖的數(shù)據(jù)條顏色，該怎么做呢？因?yàn)閿?shù)據(jù)綁定時(shí)綁定的成為了對(duì)象而不再是數(shù)組，所以我們可以通過(guò)d.x來(lái)訪問(wèn)對(duì)象中的x元素，比如：
d3.select("body").selectAll("div.h-bar")
.data(data)
.attr("class", "h-bar")
.style("width", function (d) {
return (d.width * 5) + "px";
})
.style("background-color", function(d){
return colorScale(d.color);
})
.select("span")
.text(function (d) {
return d.width;
});
其中d.width和d.color均被使用到，而colorScale()函數(shù)由一個(gè)簡(jiǎn)單的線性變換函數(shù)轉(zhuǎn)換而來(lái)：
var colorScale = d3.scale.linear()
.domain([0, 100])
.range(["#add8e6", "blue"]);
這樣一來(lái)，不同的d.color就能呈現(xiàn)不同的顏色了，拒絕單調(diào)在可視化方面是個(gè)不錯(cuò)的設(shè)計(jì)。
定義數(shù)據(jù)——綁定函數(shù)
D3的一個(gè)好處就是他允許定義函數(shù)為數(shù)據(jù)，在一些特定場(chǎng)合下這個(gè)特色會(huì)給可視化工作帶來(lái)強(qiáng)大的顯示效果。
為了實(shí)現(xiàn)數(shù)據(jù)從函數(shù)生成，可以先定義一個(gè)空數(shù)組：
var data = [];
接下來(lái)寫(xiě)兩個(gè)函數(shù)，分別實(shí)現(xiàn)函數(shù)長(zhǎng)度的定義、數(shù)據(jù)增加的描述：
var next = function (x) {
return 15 + x * x;
};
var newData = function () {
data.push(next);
return data;
};
在定義好這些之后，使用時(shí)只需要我們?cè)谶x擇好元素后在數(shù)據(jù)綁定的參數(shù)時(shí)，調(diào)用這些函數(shù)即可，具體見(jiàn)以下代碼中的.data(newData);和 .text(function(d, i){ return d(i);……
function render(){
var selection = d3.select("#container")
.selectAll("div")
.data(newData);
selection.enter().append("div").append("span");
selection.exit().remove();
selection.attr("class", "v-bar")
.style("height", function (d, i) {
return d(i) + "px";
})
.select("span")
.text(function(d, i){
return d(i);
});
}
數(shù)據(jù)處理——數(shù)組
大部分時(shí)候我們處理數(shù)據(jù)，都需要對(duì)數(shù)據(jù)進(jìn)行大量地格式化與重構(gòu)工作，而D3提供了一系列對(duì)數(shù)組的操作函數(shù)，這使得相關(guān)工作變得輕松了許多。
下面列出幾個(gè)使用方法，作為常見(jiàn)的數(shù)據(jù)操縱方法（”#xxx”表示選中的元素是個(gè)id而非class）：
//返回最小值
d3.select("#min").text(d3.min(array));
//返回***值
d3.select("#max").text(d3.max(array));
//同時(shí)返回最小值和***值
d3.select("#extent").text(d3.extent(array));
//返回計(jì)算的所有元素和
d3.select("#sum").text(d3.sum(array));
//返回中位數(shù)
d3.select("#median").text(d3.median(array));
//返回元素的平均值
d3.select("#mean").text(d3.mean(array));
//具體的排序方法，返回排序結(jié)果。
//其中ascending為升序排序，descending為降序排序。
d3.select("#asc").text(array.sort(d3.ascending));
d3.select("#desc").text(array.sort(d3.descending));
//對(duì)已經(jīng)排好序的數(shù)組特定位置（例如0.25處）的數(shù)值進(jìn)行提取
//舉個(gè)例子就是數(shù)據(jù)有十個(gè)，而我參數(shù)設(shè)置為0.25，則執(zhí)行支該步驟后返回的是第4個(gè)元素的數(shù)值。
d3.select("#quantile").text(
d3.quantile(array.sort(d3.ascending), 0.25)
);
//用于提供多重嵌套的顯示結(jié)構(gòu)
d3.nest()
數(shù)據(jù)處理——過(guò)濾數(shù)據(jù)
假設(shè)你將所有的數(shù)據(jù)都顯現(xiàn)出來(lái)了，但為了便于分析你想將特定信息的數(shù)據(jù)與其他數(shù)據(jù)區(qū)分開(kāi)，高亮出來(lái)，D3提供了一個(gè)過(guò)濾函數(shù)用于實(shí)現(xiàn)這方面的功能。
d3.filter()
當(dāng)使用這個(gè)函數(shù)時(shí)需要注意幾點(diǎn)，其包含的函數(shù)參數(shù)有三種：
-
d: 你綁定的數(shù)據(jù)集；
-
i: 從0開(kāi)始計(jì)數(shù)的索引數(shù)列；
-
this: 隱藏的指向當(dāng)前DOM元素的指針；
樣例代碼：
filter(function(d, i)) {
return d.category == category;
}
此函數(shù)的返回值是布爾類型。當(dāng)返回值為true時(shí)，則符合規(guī)則的數(shù)據(jù)會(huì)被加入新的選擇器中，作為新選擇地?cái)?shù)據(jù)用于繪制。而filter對(duì)待布爾類型的區(qū)分時(shí)并非嚴(yán)格意義上的布爾類型，意思即為flase,null,0,””,undefined,NaN這些均可以被視為不二的false類型。
以下為一個(gè)例子，其特意描紅了一組數(shù)據(jù)，以此與其它數(shù)據(jù)進(jìn)行區(qū)分：
數(shù)據(jù)加載——與服務(wù)器通信
我們不可能一直使用本地?cái)?shù)據(jù)進(jìn)行數(shù)據(jù)可視化的工作，更多的時(shí)候我們需要?jiǎng)討B(tài)的加載來(lái)自網(wǎng)上實(shí)時(shí)的數(shù)據(jù)進(jìn)行可視化數(shù)據(jù)相關(guān)的繪制工作，同時(shí)我們也希望其效果可以不斷的更新，那么接下來(lái)講講如何在數(shù)據(jù)可視化工作中實(shí)現(xiàn)動(dòng)態(tài)加載數(shù)據(jù)。 以加載本地json文件為例，這個(gè)工作其實(shí)還算簡(jiǎn)單，簡(jiǎn)單到我們把之前定義的var data換成如下代碼：
d3.json("data.json", function(error, json){
data = data.concat(json);
render(data);
});
如上所示，假設(shè)我們?cè)谕夸浵掠幸粋€(gè)數(shù)據(jù)文件叫data.json,此時(shí)我們將現(xiàn)有數(shù)據(jù)與其進(jìn)行合并（合并時(shí)用的函數(shù)是data.concat()），然后對(duì)這個(gè)數(shù)據(jù)進(jìn)行繪制（render(data)）。
除此之外，你還可以使D3用相同的方法加載csv,tsv,txt,html,xml等數(shù)據(jù)。
總結(jié)：***介紹的數(shù)據(jù)加載這部分雖然有這么多方法，但仍然可以不局限于這些進(jìn)行數(shù)據(jù)讀取，除了D3之外，你還可以任意使用其他你喜歡的JS庫(kù)進(jìn)行數(shù)據(jù)讀取操作，比如jQuery或者Zepto.js，用他們來(lái)調(diào)度Ajax請(qǐng)求。
有任何疑問(wèn)或建議歡迎聯(lián)系作者：@hijiangtao 技術(shù)博客：Data.Blog
