D3介紹

D3介紹

D3是用來作web頁面可視化的組件，其官方網址爲http://d3js.org

安裝

D3類庫的文件只有一個d3.js。下載後直接在html的<script>標籤中引用此js就能夠了。 最好安裝一個web服務器，例如apache HTTP server, nginx等等。

繪製SVG

通常D3實在SVG上進行做圖的。雖然能夠在Canvas上做圖，但D3提供了大量SVG圖形的生成器，也就是說D3更面向SVG開發。例如：

var svg = d3.select("body").append("svg").attr("width", 200).attr("height", 200);
svg.append("circle").attr("cx", "50px").attr("cy", "50px").attr("r", "50px").attr("fill", "green");

選擇集(selection)

d3.select和d3.selectAll返回的對象被稱爲選擇集。 選擇集的產生以下：

var p = d3.selectAll("p");

上面是選擇了全部的p標籤。若是隻想選擇一個可使用d3.select()方法。

選擇集產生後就能夠調用選擇集的一些方法，其方法有以下功能：

查看狀態函數

• empty() 判斷選擇集是否爲空
• node() 返回第一個非空元素, 若是選擇集爲空，則返回null.
• size() 返回選擇集元素個數。

獲取或設定值

• attr(name[,value]) 設置或返回選擇集的屬性, name參數爲屬性名稱，value爲屬性值。若是省略value，則返回當前值；若是給定了value，則將name的值設置爲value。
• classed(name[,value]) 設定或獲取選擇集的CSS類。name是類名，value是一個布爾值。布爾值表示該類是否開啓。name中能夠包含多個類（使用逗號分隔）。
• style(name[, value[, priority]]) 設定或獲取選擇集的樣式。name爲樣式名，value爲樣式值。
• property(name[,value]) 設定或獲取選擇集的屬性。有部分屬性不能使用attr()函數，例如輸入框的value屬性，須要使用property()函數。
• text([value]) 獲取或設定選擇集中的文本內容。
• html([value]) 獲取或設定選擇集中的內部HTML內容。相似於DOM的innerHTML，包括內部的標籤。

添加，插入或者刪除

• append(name) 在選擇集末尾添加一個元素。例如: body.append("p").text("hello")
• insert(name[, before]) 在選擇集指定元素以前插入一個元素。before是CSS選擇器名稱。例如：body.insert("p", "#id").text("hello")。
• remove() 刪除選擇集中的元素。

綁定數據

• datum([value]) 選擇集中每個元素都綁定相同數據。
• data([values[, key]]) 選擇集中的每個元素分別綁定values中的每一項。key是一個鍵函數，用於指定綁定數組時的對應規則。

綁定數據實際上在每一個元素裏面增長一個__data__元素，其內容爲你給定的值。 例子：

var p = d3.select("body").selectAll("p");
p.datum(7);
console.log(p);

注意：在被綁定數據的元素後面添加新元素後，新元素還會繼承綁定數據。

var dataset = [1, 2, 3];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset)
console.log(update)

綁定順序

當使用data進行綁定時，默認採用升序，第0元素綁定數組中第0項，第1元素綁定數組中第1項，依次類推。若是想使用不一樣的順序綁定，那麼就會用到data()第二個參數鍵函數。

persons = [{id: 2, name: "kris"}, {id: 1, name: "zhang"}]

p.data(persons, function(d) { return d.id; })
    .text(function(d) {
        return d.id + ": " + d.name;
    });

選擇集處理

當數組長度和元素數量不一致時，就有enter部分，exit部分，update部分。

var dataset = [1, 2, 3];
var p = d3.select("body").selectAll("p");
var update = p.data(dataset);

// update部分直接修改
update.text( function(d) { return d;} );

var enter = update.enter()
// enter部分爲增長的數據，添加對應的元素
enter.append("p").text(
        function(d) { return d; };
    );

// exit部分就是刪除元素
var exit = update.exit()
exit.remove();

過濾器

有時候須要根據被綁定的數據對選擇集中的元素進行過濾，使用filter()函數。

var p = d3.select("body").selectAll("p");
p.filter(function(d, i) {
    if (d > 10) {
        return true;
    }
    return false;
});

選擇集排序

根據被綁定數據對選擇集中的元素進行排序，使用sort()函數。

var p = d3.select("body").selectAll("p");
p.sort(function(a, b) {
    return a - b;
});

選擇集遍歷

對選擇集中每一個元素分別處理，使用each()函數。

var p = d3.select("body").selectAll("p");
p.data(dataset)
    .each(function(d, i) {
        d.name = "kris";
    })
    .text(function(d, i) {
        return d.id + ": " + d.name;
    });

call函數

call()函數用來把選擇集做爲參數傳遞給某個函數。拖拽、縮放元素等操做會用到call()。

d3.selectAll("div").call(myFun);

function myFun(selection) {
    selection.attr("name", "kris");
}

數組處理

D3提供了不少針對數組的操做函數。

排序

• d3.ascending(a, b) 遞增函數
• d3.descending(a, b) 遞減函數

求值

• d3.min(array[, accessor]) 返回最小值。accessor是一個函數，指定以後數組各項會先調用accessor。
• d3.max(array[, accessor]) 返回最大值
• d3.extent(array[, accessor]) 返回一個列表，其中包括最小和最大值
• d3.sum(array[, accessor]) 返回數組總和。若是數組爲空，則返回0.
• d3.mean(array[, accessor]) 返回數組平均值，若是數組爲空，則返回undefined
• d3.median(array[a, accessor]) 返回數組中間值，若是數組爲空，則返回undefined
• d3.quantile(numbers, p) 求取p分位點的值。p的範圍爲[0, 1]。數組須要先遞增排序。
• d3.variance(array[, accessor]) 求方差
• d3.deviation(array[, accessor]) 求標準差
• d3.bisectLeft() 獲取一個數組項左邊的位置。
• d3.bisect() 獲取一個數組項右邊的位置。
• d3.bisectRight() 和bisect()同樣。

操做數組

• d3.shuffle(array[, lo[, hi]]) 隨機排列數組內容
• d3.merge(arrays) 合併兩個數組（參數是一個大數組，包含要合併兩個數組）
• d3.pairs(array) 返回一個數組，其包含兩個相鄰的數組成的數組。
• d3.range([start, ] stop [, step]) 返回等差數列。start默認值爲0，step默認值爲1.
• d3.permute(array, indexes) 根據指定的索引號數組返回排列後的數組。
• d3.zip(array, ...) 製做數組的數組。
• d3.transpose(matrix) 求轉置矩陣。

映射（Map）

• d3.map([object][, key]) 創建一個映射。第一個參數爲數組，第二個參數指定映射的key。
• map.has(key) 判斷是否key存在於map中
• map.get(key) 獲取key對應的value，不存在返回undefined
• map.set(key, value) 設定key對應的value
• map.remove(key) 刪除key和value
• map.keys() 返回全部的key（數組）
• map.values() 返回全部value（數組）
• map.entries() 返回key和value的數組
• map.forEach(function) 分別對map中的每一項調用function函數。function函數有2個參數：key, value。
• map.empty() 是否爲空
• map.size() 返回元素個數

集合(Set)

• d3.set([array]) 創建一個集合。若是數組給定，則使用數組中的值，但不會使用重複元素。
• set.has(value) 是否存在value
• set.add(value) 增長value
• set.remove(value) 刪除value
• set.values() 返回全部內容
• set.forEach(function) 對每個元素調用function。function參數爲value。
• set.empty() 是否爲空
• set.size() 返回大小

嵌套結構(Nest)

嵌套結構用來對數組中的對象進行分類，一層套一層，讓索引更加方便。就是把一組元素以樹狀結構組織起來。

• d3.nest() 建立一個空的nest對象。
• nest.key(function) 指定nest的key
• nest.entries(array) 指定數組array將放入nest中做爲數據，同時把上一步的key()函數指定鍵做爲key。
• nest.sortKeys(comparator) 對nest的數據進行排序，在key()方法後調用. 參數爲d3.descending或ascending
• nest.sortValues(comparator) 根據值進行排序
• nest.rollup(function) 對每一組葉子節點調用指定的函數function。參數爲values，當前葉子節點的數組。
• nest.map(array[, mapType]) 已映射的形式輸出數組。

@待續