2016-04-07
本文談?wù)?d3 中的數(shù)據(jù)綁定躬拢、scale窿侈、坐標(biāo)軸做个。
一鸽心、d3.js 介紹
1. d3 是什么？
d3.js 是一個用于制作數(shù)據(jù)可視化相關(guān)的 javascript 工具庫居暖，你可以在 d3.js 官網(wǎng) 中找到數(shù)之不盡的顽频、使用 d3 繪制的精美數(shù)據(jù)可視化圖像。
d3.js 是基于 svg 的函數(shù)庫太闺，（其實也支持 canvas糯景，但 api 不夠豐富）
2. 為什么要使用 d3 ？
若你的項目是數(shù)據(jù)相關(guān)的省骂，且需要大量定制化的圖表時蟀淮，d3.js 會是一個很好的選擇。
曾使用過 highchart.js , echart.js(百度)钞澳，這兩者都是很好的圖表庫怠惶，可滿足于常見的通用圖表，如柱狀圖轧粟、餅圖策治、折線圖、地圖等等逃延。但無論是 highchart 還是 echart览妖，這類圖表庫能提供的圖表畢竟是有限的，即便它們提供的圖表越來越豐富（如也涵蓋了許多高級復(fù)雜圖表）揽祥、靈活性（可配置項）越來越高讽膏，但無法隨心所欲，繪制出你天馬星空的所思所想拄丰。
3. 一個標(biāo)準(zhǔn)府树、常見的 d3.js 操作流程如下：
d3.select(".chart")
// 若 .chart 下沒有任何 div, 返回空數(shù)組
.selectAll("div")
// 數(shù)據(jù)綁定
.data(data)
// 此刻返回的是一系列占位符
.enter()
// 插入 DOM 結(jié)點
.append("div")
// 設(shè)置樣式
.style("width", function(d) { return d * 10 + "px"; })
// 插入文字
.text(function(d) { return d; });
其核心包括：選擇器俐末，數(shù)據(jù)綁定，DOM 操作奄侠，樣式與文字卓箫；
二、選擇器
- d3 與 css3 選擇器保持一致垄潮，如支持標(biāo)簽
"div", 類名".awesome", id"#foo", 屬性"[color=red]", 層級"parent child"等等烹卒； -
select()和selectAll()，單選和多選區(qū)別弯洗。
三旅急、數(shù)據(jù)綁定
d3 在處理數(shù)據(jù)方面，有三種狀態(tài)牡整，enter(), exit() 和 update藐吮。
- enter() － 處理新加入的數(shù)據(jù)
- exit() － 處理已廢棄的數(shù)據(jù)
- update - 更新數(shù)據(jù) （內(nèi)部操作）
缺省狀態(tài)下，d3 根據(jù)序號（index）來進行數(shù)據(jù)綁定
將 elements 與數(shù)據(jù)集(datas)逃贝，一對對拿出來看：(elements 對應(yīng)于 d3 渲染在頁面上的 dom 結(jié)點谣辞。)
- 如果 elements 內(nèi)部屬性 data 中存的值不等于 data，則 update();
- 如果 datas 的長度大于 elements 長度沐扳，多余的那些 data 都屬于 enter 范疇泥从；
- 如果 datas 的長度小于 elements 長度，多余的那些 elements 都屬于 exit 范疇沪摄；
指定了參照值的情況下：（即在調(diào)用 .data() 綁定數(shù)據(jù)時歉闰，再傳入 key function 指定特定的 key ）
elements 內(nèi)部屬性 data 中存的值與實際 data 對比，若：
- 相等卓起， update()
- 不相等和敬，原值放入 exit(); 新增放入 enter();
與順序無關(guān)
四、縮放 scale (或者翻譯成 “比例尺”)
作用：將數(shù)據(jù)集與我們希望的視圖大小映射起來戏阅，如 datas =[1,2,3],也許我們希望展現(xiàn)在屏幕中的是 [100px, 200px, 300px];
- domain() data space － 設(shè)置輸入域昼弟，相當(dāng)于數(shù)學(xué)中的 “定義域”
- range() display space - 設(shè)置輸出范圍，相當(dāng)于數(shù)學(xué)中的 “值域”
1. 連續(xù)的 － 如 [0, 100]
- 最常用的是線性縮放
linear()奕筐，既y = mx+b舱痘。 其中 m 與 b 通過 domain 和 range 計算可得； - 除此之外的函數(shù)還有
pow(),sqrt(),log()等离赫。
2. 離散的 － 即定義域和值域并非是連續(xù)變化的芭逝。如 ['A', 'B', 'C', 'D']
-
ordinal()序數(shù)縮放
好玩之處
-
.range("green", 'blue')出現(xiàn)從綠到藍(lán)的漸變顏色值； -
.clamp(true)限定界限渊胸，越出后即截取掉旬盯。
五秋冰、坐標(biāo)軸
由 <g>, <line>, <text> 組成
- d3.svg.axis()
- scale()：指定縮放盆顾。
- orient()：指定刻度的朝向，如 'top', left' 等
- ticks()：指定刻度的數(shù)量。
- call()：將當(dāng)前的選擇集作為參數(shù)傳遞給此函數(shù)
六谣拣、資料
官網(wǎng)學(xué)習(xí)資料好齊全推溃，講解的也很贊截粗。下面幾篇基本都是從官網(wǎng)上找到鏈接的巨税。
