2. 我為什么用D3？
1）結(jié)合HTML查描，SVG，CSS柏卤，D3可以圖形化的冬三，生動(dòng)的展現(xiàn)數(shù)據(jù)。是目前最流行的數(shù)據(jù)可視化庫闷旧，同時(shí)是Github上前端庫排行第二（僅次于bootstrap）长豁。
2）比Processing這樣的底層繪圖庫更簡(jiǎn)單，比Echarts這樣高度封裝的圖表庫更自由忙灼。
3.D3的下載和使用
4.D3有哪些功能？
行為 - 可重用的交互行為钝侠。
核心 - 包括選擇器该园，過渡，數(shù)據(jù)處理帅韧，本地化里初，顏色等。
地理 - 球面坐標(biāo)忽舟，經(jīng)緯度運(yùn)算双妨。
幾何 - 提供繪制2D幾何圖形的實(shí)用工具。
布局 - 推導(dǎo)定位元素的輔助數(shù)據(jù)叮阅。
比例尺 - 數(shù)據(jù)編碼和視覺編碼之間轉(zhuǎn)換刁品。
可縮放矢量圖形 - 提供用于創(chuàng)建可伸縮矢量圖形的實(shí)用工具。
時(shí)間 - 解析或格式化時(shí)間浩姥，計(jì)算日歷的時(shí)間間隔等挑随。
二、添加元素
d3.select("body").append("p").text("小可愛!");
解析：
d3代表D3對(duì)象勒叠；
d3的select()方法通過使用CSS選擇器的語法來選擇DOM元素(如body)兜挨，并且選擇的是第一個(gè)匹配的元素膏孟，使用 selectAll() 可以返回所有匹配元素。
append()方法是在所選擇元素內(nèi)的末尾加上元素(如p)拌汇，也即追加柒桑；
text()方法寫入元素內(nèi)容。
三噪舀、數(shù)據(jù)綁定
D3 一個(gè)很強(qiáng)大的特點(diǎn)是能將數(shù)據(jù)綁定到 DOM 上幕垦，也就是綁定到文檔上。
例如網(wǎng)頁中有段落元素? 和一個(gè)整數(shù) 100傅联，于是可以將整數(shù) 100 與 綁定到一起先改。綁定之后，當(dāng)需要依靠這個(gè)數(shù)據(jù)才操作元素的時(shí)候蒸走，會(huì)很方便仇奶。
1. D3可以處理哪些類型的數(shù)據(jù)？
JS的數(shù)據(jù)類型比驻。如數(shù)字该溯，時(shí)間，字符串别惦，布爾值狈茉，數(shù)組，對(duì)象等都可以掸掸。
D3自定義的數(shù)據(jù)類型氯庆。如集合（Set）,映射（Map）,嵌套（Nest）,及各種顏色空間（RGB，HSL扰付，L*a*b堤撵，HSV）對(duì)象等
最常用的是數(shù)組，JSON羽莺。特殊的有CSV实昨，GeoJSON數(shù)據(jù)等。
2.如何綁定盐固？
D3 中是通過以下兩個(gè)函數(shù)來綁定數(shù)據(jù)的：
datum()：綁定一個(gè)數(shù)據(jù)到選擇集上
data()：綁定一個(gè)數(shù)組到選擇集上荒给，數(shù)組的各項(xiàng)值分別與選擇集的各元素綁定
1）datum()
在上面的代碼中，用到了一個(gè)無名函數(shù) function(d, i)刁卜。當(dāng)選擇集需要使用被綁定的數(shù)據(jù)時(shí)志电，常需要這么使用。其包含兩個(gè)參數(shù)长酗，其中：
d 代表數(shù)據(jù)溪北，也就是與某元素綁定的數(shù)據(jù)。
i 代表索引，代表數(shù)據(jù)的索引號(hào)之拨，從 0 開始茉继。
datum只是替換一組新的數(shù)據(jù)。
2)data()
3.代碼解析
selectAll("p")? ? ? ? ? //選擇DOM中的所有段落蚀乔。
data(dataset)? ? ? ? //計(jì)數(shù)和分析我們的數(shù)據(jù)值烁竭。
有五個(gè)值，之后我們的數(shù)據(jù)集執(zhí)行了5次吉挣，每個(gè)值一次派撕。
?enter()? ? ? ? ? ? ? ? ?//綁定數(shù)據(jù)和DOM元素。
這個(gè)方法將數(shù)據(jù)傳遞到DOM中睬魂。如果數(shù)據(jù)值比相應(yīng)的DOM元素多终吼，就用enter()創(chuàng)建一個(gè)新元素的占位符。
append("p")? ? ? ? ? ? ? ? ? ? ? ? //追加元素
通過enter()創(chuàng)建的占位符 在DOM中插入一個(gè)p元素氯哮。
text(）? ? ? ? ? ? ? //為新創(chuàng)建的p標(biāo)簽插入一個(gè)文本值际跪。
四、使用數(shù)據(jù)
五喉钢、繪制條形圖
1）attr("class","bar")? //設(shè)置屬性
2）d3.range(25) 生成25個(gè)數(shù)字：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]姆打。當(dāng)然我們沒有用它生成的數(shù)字，而只是用它來循環(huán)肠虽。真正生成數(shù)字的地方在map函數(shù)里幔戏。（數(shù)組）
3）d3.map()? //構(gòu)建一個(gè)新的map
map函數(shù)，顧名思義映射税课，也就是生成一個(gè)對(duì)應(yīng)該位置的一個(gè)數(shù)字（當(dāng)然這里強(qiáng)大之處不僅僅是一個(gè)數(shù)字闲延，還可以是對(duì)象）。（數(shù)組）
4）我們用d3.round函數(shù)對(duì)隨機(jī)數(shù)保留一位小數(shù)四舍五入伯复。（格式化）
5）我們用d3.random.normal(15,8)()生成一個(gè)滿足期望是15慨代，方差是8的正態(tài)分布的隨機(jī)數(shù)。（數(shù)學(xué)）
六啸如、使用D3繪制SVG
svg是可縮放矢量圖語言，所以在svg上繪制的幾何圖形我們可以任意縮放氮惯，而不會(huì)導(dǎo)致像素模糊叮雳，當(dāng)然也可以body上直接繪制空div，填充的方式妇汗，間接表現(xiàn)條形圖帘不，不過在通常來講對(duì)前端人員來講是不可能干的，所以我們一般在svg這個(gè)畫布上繪制杨箭，先append一個(gè)div設(shè)置width寞焙，height，然后再添加rect，circle捣郊，svg上的幾何圖形有辽狈，rect，circle呛牲，還支持路徑自由繪制刮萌。
1）創(chuàng)建svg
2）數(shù)據(jù)驅(qū)動(dòng)的svg? ?select，data娘扩，enter着茸，append
3）繪制圓：圓心坐標(biāo)，直徑
這里會(huì)使用D3經(jīng)典的select-data-enter-append-attr/style的編程套路琐旁。
也就是選擇元素-綁定數(shù)據(jù)-添加新元素的占位符-添加元素-設(shè)置屬性或樣式涮阔。
七、SVG繪制更自由的條形圖
1）創(chuàng)建svg
2）繪制矩形灰殴，綁定數(shù)據(jù)
3）矩形條的屬性和樣式
繪制的思路是：
- 條寬
條寬 = 條實(shí)際寬度 + 間隙的寬度敬特。
其中條寬 = (w / dataset.length）
間隙的寬度 = barPadding
- 條高
條高 = 條長(zhǎng)-縱坐標(biāo)（縱坐標(biāo)是從上到下計(jì)算，即下方向?yàn)檎?即條高 = h - (d * 4)
- 條的顏色
條的顏色用據(jù)數(shù)據(jù)集生成的動(dòng)態(tài)RGB值填充验懊。
4）文本標(biāo)記（可是數(shù)值）
x坐標(biāo)：i * (w / dataset.length) + (w / dataset.length - barPadding) / 2
y坐標(biāo)：h - (d * 4) + 14;
八擅羞、散點(diǎn)圖繪制
1）創(chuàng)建svg
2）繪制圓，綁定數(shù)據(jù)
3）圓的屬性和樣式
九义图、線性比例尺
1. 定義域和值域
比例尺有兩個(gè)最重要的函數(shù)：
.domain([100, 500]) 定義域范圍
.range([10, 350]) 值域范圍
下面就是定義比例尺的方法：
var scale = d3.scale.linear()
? ? ? ? ? ? .domain([100, 500])
? ? ? ? ? ? .range([10, 350]);
比例尺最終都會(huì)對(duì)定義域執(zhí)行相應(yīng)的函數(shù)變換减俏，然后再把這個(gè)中間數(shù)據(jù)線性變換到值域范圍上。
2. 坐標(biāo)軸的縮放
最大的X
d3.max(dataset, function(d) {? ? //返回 480
? ? return d[0];? //返回每個(gè)子數(shù)組的第一個(gè)元素
});
X軸縮放
var xScale = d3.scale.linear()
? ? ? ? ? ?? .domain([0, d3.max(dataset, function(d) { return d[0]; })])
? ? ? ? ? ?? .range([0, w]);
3.設(shè)定圓心的坐標(biāo)
縮放后的坐標(biāo)X值
.attr("cx",function(d) {
????return xScale(d[0]);
})
4.設(shè)定文本坐標(biāo)值
.attr("x",function(d) {
? ? return xScale(d[0]);
})
注：點(diǎn)大小與圈大小成正比碱工，想把大的放在下面娃承，只要改變Y軸值域倒轉(zhuǎn)即可： .range([h , 0]);
注：為了SVG邊緣不被截?cái)嗫梢栽O(shè)置邊距： .range([h - padding, padding]);
十、坐標(biāo)軸
1.定義和創(chuàng)建x軸
//定義X軸
var xAxis = d3.svg.axis()
? ?? .scale(xScale)
? ?? .orient("bottom");
//創(chuàng)建X軸
svg.append("g").call(xAxis);
其中：
scale函數(shù)用來指定坐標(biāo)軸的比例尺怕篷。
orient函數(shù)用來指定坐標(biāo)軸的方位历筝，可取值有l(wèi)eft，right廊谓，top梳猪，bottom。
調(diào)用的時(shí)候任意的選擇器call調(diào)用軸蒸痹，或者xAxis(選擇器)均可春弥。
2. 調(diào)整X軸的樣式
把坐標(biāo)軸平移到下面：
svg.append("g")
.attr("class","axis")
.attr("transform","translate(0,"+ (h - padding) +")")
? ? .call(xAxis);
3. 設(shè)置刻度數(shù)
.ticks(5);? //設(shè)置刻度數(shù)
注意這個(gè)ticks函數(shù)指定的數(shù)字只是一個(gè)大概的數(shù)量，具體生成多少D3會(huì)自動(dòng)調(diào)整叠荠。
4.Y軸
十一匿沛、動(dòng)畫
var tran = d3.transition()?- 創(chuàng)建一個(gè)過渡對(duì)象
tran.delay()?- 設(shè)置延時(shí)時(shí)間，過渡經(jīng)過一段時(shí)間后才會(huì)開始
tran.duration()?- 設(shè)定過渡的持續(xù)時(shí)間
tran.ease()?- 設(shè)定過渡的樣式榛鼎。
tran.attr()?- 設(shè)置過渡屬性
tran.style()?- 設(shè)置過渡樣式;
